css3 響應(yīng)式媒體查詢的示例代碼
我要評(píng)論讓我們看一下使用媒體查詢的更多示例。媒體查詢是一種流行的技術(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;
}
}
列的媒體查詢
媒體查詢的常見(jiàn)用途是創(chuàng)建靈活的布局。在此示例中，我們創(chuàng)建的布局在四個(gè)，兩個(gè)和全寬列之間變化，具體取決于不同的屏幕大?。?/p>
.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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實(shí)戰(zhàn)(推薦)
這篇文章主要介紹了詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實(shí)戰(zhàn)(推薦),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的2020-11-16css3媒體查詢中device-width和width的區(qū)別詳解
這篇文章主要介紹了css3媒體查詢中device-width和width的區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-03-27CSS3中媒體查詢結(jié)合rem布局適配手機(jī)屏幕
這篇文章主要介紹了css3中媒體查詢結(jié)合rem布局適配手機(jī)屏幕,需要的朋友可以參考下2019-06-10- 這篇文章主要介紹了CSS3 Media Queries中媒體屬性的使用,文章中還以一個(gè)響應(yīng)式設(shè)計(jì)的例子作為補(bǔ)充講解,需要的朋友可以參考下2016-02-29
CSS3媒體查詢Media Queries基礎(chǔ)學(xué)習(xí)教程
這篇文章主要介紹了CSS3媒體查詢基本學(xué)習(xí)教程,包括基本的語(yǔ)法和邏輯操作符,以及媒體查詢可檢測(cè)的特性與利用viewport禁止用戶縮放等部分的內(nèi)容,需要的朋友可以參考下2016-02-29使用CSS媒體查詢(Media Queries)和JavaScript判斷瀏覽器設(shè)備類型的方法
有無(wú)數(shù)的理由要求我們?cè)谌魏螘r(shí)候都應(yīng)該知道用戶是使用的什么設(shè)備瀏覽我們的網(wǎng)站——寬屏，普通屏，平板，手機(jī)？知道這些特征，我們web應(yīng)用的CSS和JavaScript才能同步做相應(yīng)2014-04-03- 媒體類型：all 所有設(shè)備、screen 電腦顯示器等等；媒體特性共13種，可以說(shuō)是一個(gè)類似CSS屬性的集合，感興趣的朋友可以了解下本文，希望對(duì)大家有所幫助2013-09-12
CSS3媒體查詢實(shí)現(xiàn)不同寬度的下不同內(nèi)容的展示功能
這篇文章主要介紹了CSS3媒體查詢實(shí)現(xiàn)不同寬度的下不同內(nèi)容的展示功能,本章節(jié)我們將為大家演示一些多媒體查詢實(shí)例，需要的朋友可以參考下2023-11-27
