国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css3 響應(yīng)式媒體查詢

Bowman_han / 3114人閱讀

摘要：讓我們看一下使用媒體查詢的更多示例。媒體查詢是一種流行的技術(shù)，用于向不同的設(shè)備提供定制的樣式表。

讓我們看一下使用媒體查詢的更多示例。媒體查詢是一種流行的技術(shù)，用于向不同的設(shè)備提供定制的樣式表。為了演示一個(gè)簡(jiǎn)單的示例，我們可以更改不同設(shè)備的背景顏色

/* 將body的背景顏色設(shè)置為tan */
body {
  background-color: tan;
}
/* 在992px或更低的屏幕上，將背景顏色設(shè)置為藍(lán)色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在600px或更低的屏幕上，將背景顏色設(shè)置為橄欖色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

列的媒體查詢
媒體查詢的常見用途是創(chuàng)建靈活的布局。在此示例中，我們創(chuàng)建的布局在四個(gè)，兩個(gè)和全寬列之間變化，具體取決于不同的屏幕大小：

.column {
  float: left;
  width: 25%;
}
/*在992px寬或更小的屏幕上，從四列到兩列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在寬度為600px或更小的屏幕上，使列堆疊在彼此之上而不是彼此相鄰*/
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

使用媒體查詢更改字體大小
您還可以使用媒體查詢來更改不同屏幕大小的元素的字體大?。?/p> 

/* 如果屏幕大小超過600px寬，請(qǐng)將字體大小設(shè)置為80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* 如果屏幕尺寸為600px或更小，請(qǐng)將字體大小設(shè)置為30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

使用附加值：在下面的示例中，我們使用逗號(hào)向我們現(xiàn)有的媒體查詢添加其他媒體查詢（這將像OR運(yùn)算符一樣）：例如當(dāng)寬度介于600px和900px之間或高于1100px時(shí) - 改變外觀

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

更多好的css3媒體查詢文章

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116168.html

相關(guān)文章

  • 響應(yīng)式web設(shè)計(jì)--媒體查詢

    摘要：媒體查詢的用法媒體查詢包含一個(gè)可選的媒體類型和，滿足規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為或。還有一個(gè)與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢的用法 media 媒體查詢包含一個(gè)可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為true或false。如...

    Eric 評(píng)論0 收藏0

  • 響應(yīng)式web設(shè)計(jì)--媒體查詢

    摘要：媒體查詢的用法媒體查詢包含一個(gè)可選的媒體類型和，滿足規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為或。還有一個(gè)與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢的用法 media 媒體查詢包含一個(gè)可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為true或false。如...

    Salamander 評(píng)論0 收藏0

  • 響應(yīng)式布局的實(shí)現(xiàn)

    摘要：響應(yīng)式布局的概念響應(yīng)式布局，即，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁(yè)的不同展示方式?？蚣軐?shí)現(xiàn)響應(yīng)式布局利用中柵格系統(tǒng)可以簡(jiǎn)單實(shí)現(xiàn)響應(yīng)式布局，這里就需要去理解一下啥是柵格系統(tǒng)代表在端上顯示在一行的個(gè)柵欄，也就是一半。 響應(yīng)式布局的概念 響應(yīng)式布局，即 Responsive design，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁(yè)的不同展示方式。通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏...

    syoya 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<