一、媒體查詢

<!-- link元素中的CSS媒體查詢 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /><!-- 樣式表中的CSS媒體查詢 --> <style> @media (max-width: 600px) {.facet_sidebar {display: none;} } </style>

當(dāng)媒體查詢?yōu)閠rue時(shí)，其對(duì)應(yīng)的樣式表或樣式規(guī)則就會(huì)遵循正常的級(jí)聯(lián)規(guī)則進(jìn)行應(yīng)用。即使媒體查詢返回false,<link>標(biāo)簽指向的樣式表也會(huì)被下載(但是它們不會(huì)被應(yīng)用)

除非使用not或only操作符，否則媒體類(lèi)型是可選的，默認(rèn)值是all(全部).

邏輯操作符：not、and 和 only

and

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

上面媒體查詢僅在電視媒體上，可視區(qū)域不小于700像素寬度并且是橫屏?xí)r有效。

逗號(hào)

可以將多個(gè)媒體查詢以逗號(hào)分隔放在一起；只要其中任何一個(gè)為真，整個(gè)媒體語(yǔ)句就返回真。相當(dāng)于 or 操作符。

@media (min-width:700px), handheld and (orientation: landscape){ ... }

上文，如果是一個(gè)大于700px寬的屏幕設(shè)備，或者 是一個(gè)橫屏手持設(shè)備，整個(gè)媒體查詢返回真。

not

@media not screen and (color), print and (color)//等價(jià)于@media (not (screen and (color))), print and (color)

only

only關(guān)鍵字防止老舊的瀏覽器不支持帶媒體屬性的查詢而應(yīng)用到給定的樣式

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

?

二、斷點(diǎn)設(shè)置

bootstrap4:

/ 默認(rèn)為手機(jī)端樣式// 等于或大于 34*16 = 544px（手機(jī)橫屏） @media (min-width: 34em) { ... }// 等于或大于 48*16 = 768px(平板豎屏) @media (min-width: 48em) { ... }// 等于或大于 62*16 = 992px（pc窄屏） @media (min-width: 62em) { ... }// 等于或大于 75*16 = 1200px（ pc寬屏） @media (min-width: 75em) { ... }// pc超大屏 1380px @media (min-width: 1380px) { ... }

斷點(diǎn)的設(shè)置跟站點(diǎn)的內(nèi)容，用戶設(shè)備的分辨率，用戶規(guī)模和成本計(jì)算都息息相關(guān)，所以這些都應(yīng)該考慮進(jìn)去，而不是盲目的抄來(lái)就用。

?

摘自：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries；

　　　http://imweb.io/topic/56dff5121a5f05dc506430da

轉(zhuǎn)載于:https://www.cnblogs.com/ccAngel/p/9958861.html

總結(jié)

以上是生活随笔為你收集整理的响应式css的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。