動態切換圖片（使用PHP），但也使用CSS媒體查詢？

我有一個替代的標籤圖像動態切換圖片（使用PHP），但也使用CSS媒體查詢？

<h1 id=myImage>Text</h1>

的CSS看起來像：

h1#myImage { 
    text-indent: -9999px; 
    background: url('myImage.jpg') no-repeat; 
    width: 400px; 
    height: 80px; 
    } 

    @media-only screen and (max-width: 767px) { 
    h1#myImage { 
    text-indent: -9999px; 
    background: url('myImage-mobile.jpg') no-repeat; 
    width: 400px; 
    height: 80px; 
    } 
}

這工作我希望它的方式（即當我調整瀏覽器，我看到了移動版本的圖像）...但是現在我需要h1＃myImage根據用戶的喜好動態更改......以便「myImage.jpg」和「myImage-mobile.jpg」與「myNewImage.jpg」互換「myNewImage-mobile.jpg」

我也使用LESS.js所以也許如果有一些方法可以將我的CSS變量與php變量結合起來..

來源

2012-02-13 redconservatory

你應該能夠將你的較少文件轉換成一個php文件，並在那裏做任何你想要的變量，然後在你的鏈接標記中使用它作爲href。

style.php

h1#myImage { 
text-indent: -9999px; 
background: url('<?php echo $image_name; ?>') no-repeat; 
width: 400px; 
height: 80px; 
}

從

<link rel="stylesheet/less" type="text/css" href="styles.less">

要

<link rel="stylesheet/less" type="text/css" href="styles.php">

這是你會在PHP做動態CSS的東西一樣都不能少了前周圍。

來源

2012-02-13 17:57:45 Hersha

是否有與此相關的性能問題？ – redconservatory 2012-02-13 18:09:35

@redconservatory唯一的性能問題將取決於您在發送LESS文件之前正在處理的PHP處理量有多大。在客戶端應該沒有區別。 – Hersha 2012-02-13 19:16:21

當你使用less.js處理客戶端上的無文件時，總會有一點點的perf命中。請注意，這也取決於JS的支持（顯然，但這是關於你的觀衆）。 – bzx 2012-02-13 20:31:34

動態切換圖片（使用PHP），但也使用CSS媒體查詢？

回答

相關問題