欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3 響應(yīng)式媒體查詢的示例代碼

  發(fā)布時(shí)間：2019-09-25 14:17:46   作者：佚名   我要評(píng)論
這篇文章主要介紹了css3 響應(yīng)式媒體查詢的示例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

讓我們看一下使用媒體查詢的更多示例。媒體查詢是一種流行的技術(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%;
  }
}

使用媒體查詢更改字體大小

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

/* 如果屏幕大小超過(guò)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;
  }
}

總結(jié)

以上所述是小編給大家介紹的css3 響應(yīng)式媒體查詢的示例代碼,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論