有沒有辦法在不同的屏幕尺寸上更改浮點數？

Question

我不確定我是否能夠清楚地解釋它，以及這是否可能。我只掌握HTML/CSS的基本知識。我正在尋找一種方法，當從較小的屏幕（移動設備）查看浮動元素而不是浮動。我有一個圖像浮動在一個段落的左側，但從移動設備上查看時，並排文本的圖像太擁擠。有沒有辦法使其在正常情況下左側浮動，但在小屏幕中查看時會出現在文本的頂部？謝謝！

Answer 1

您需要的是定義媒體查詢。媒體查詢就像css觸發器一樣，它定義了將應用某些規則的分辨率。

.div img { 
    float: left; 
} 

/*This will cause the img receive float none rule when screen is smaller than 768px*/ 
@media only screen and (max-width: 768px) { 
    .div img { 
     float: none; 
    } 
} 

有一個完整的指南，你可以檢查出右邊here。

Answer 2

使用media queries應該是你需要的。

例如。

@media only screen and (max-width: 768px) { 
    .content { 
     float: none; 
    } 
} 

基本上說，如果屏幕尺寸小於768px，那麼類內容將不會有任何浮動。

Answer 3

你要找的是所謂MediaQueries： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

你會需要這樣的東西：

@media screen and (max-width: 400px){ 
    yourelementselector { 
     ... your CSS... 
    } 
}