響應動態html

Question

如何讓一個html元素改變，如果媒體寬度低於，比如說726px？

例如我有一個圖像，如果介質寬度低於726像素，我想用另一個圖像進行更改。

Answer 1

我建議您捆綁低分辨率樣式，你可以通過在你以下鏈接激活一個單獨的css文件HTML頭部分：

<link rel="stylesheet" media="only screen and (max-width:726px)" href="your-low-res-styles.css" title="norrowscreen" /> 

關於你的問題：「有沒有辦法改變的HTML ...」： 在你的代碼包含一個matchMedia聽衆：

if (window.matchMedia !== undefined) { 
    var mq = window.matchMedia("(max-width: 726px)"); 
    mq.addListener(onWidthChange); 
    onWidthChange(mq); 
} 
function onWidthChange(mq) { 
    if (mq.matches) { 
     $("#img0").attr("src", url1); 
    } else { 
     $("#img0").attr("src", url2); 
    ); 
}; 

Answer 2

設置CSS生效，直到726px

@media screen and (max-width: 726px) { 
    background-image: url(image-med.png); 
} 

@media screen and (min-width: 727px) { 
    background-image: url(image-big.png) 
} 

Answer 3

@media only screen and (max-width: 726px){ 
#div{ background-image: url(image-1.png)} 
} 
@media only screen and (min-width: 727px){ 
#div{ background-image: url(image-2.png)} 
}