柚子快報邀請碼778899分享：css之媒體查詢
柚子快報邀請碼778899分享：css之媒體查詢
一、媒體查詢
問題：因為移動端的尺寸不同,但是，在移動端屏幕上顯示的元素的大小是相同的
解決：元素的尺寸大小，要根據(jù)屏幕尺寸的大小發(fā)生變化
1.媒體類型
媒體類型（media types）描述設(shè)備的一般類別
all:適用于所有的設(shè)備print：適用于打印模式screen：主要用于屏幕speech：主要用于語音合成器
/* 瀏覽器模式 */
/* @media screen {
.box {
font-size: 30px;
}
} */
/* 打印模式 */
@media print {
.box {
font-size: 30px;
}
}
2.媒體特性
媒體特性描述了 user-agent輸出設(shè)備 或是瀏覽器環(huán)境的具體特征
width:viewport的寬度height：viewport的高度aspect-ratio：viewport的寬高比orientation：viewport的旋轉(zhuǎn)方向
3.邏輯操作符
邏輯操作符not and 和only 可用于聯(lián)合構(gòu)造復雜的媒體查詢
and:用于將多個媒體查詢規(guī)則組成單條的媒體查詢not：用于否定媒體查詢，如果不滿足這個條件，返回true，否則返回falseonly：用于舊版的瀏覽器識別媒體類型逗號：用于將多個媒體查詢合并為一個規(guī)則
/* 使用and操作符 在區(qū)間范圍內(nèi)生效
注意點：每個屏幕的尺寸點，被稱為是屏幕斷點（閾值）保證每個斷點的值不能重合
*/
@media screen and (max-width:699px) {
.box {
width: 1000px;
height: 200px;
background-color: green;
}
}
@media screen and (min-width:700px) and (max-width:1200px) {
.box {
width: 1000px;
height: 200px;
background-color: red;
}
}
/* 大于 1200px */
@media screen and (min-width:1201px) {
.box {
width: 1000px;
height: 200px;
background-color: blue;
}
}
/* 取反 */
/* @media not screen and (min-width:700px) {
.box {
width: 1000px;
height: 200px;
background-color: blue;
}
} */
/* 逗號相當于是 或 的操作 */
@media screen,
print and (min-width: 700px) {
.box {
width: 200px;
height: 200px;
background-color: blue;
}
}
4.link標簽方式
旋轉(zhuǎn)方向? portrait: 豎屏 landscape: 橫屏
二、媒體查詢的編寫位置和順序
2.1媒體查詢一般會添加到樣式表的底部，對css優(yōu)先級的覆蓋
.box{
width: 100px;
height: 100px;
border-radius: 30px;
background-color: blue
}
/* 媒體查詢樣式放在普通樣式之后 */
@media screen and (max-width:700px) {
.box {
background-color: green;
}
}
2.2移動端->pc端的適配規(guī)則：min-width從小到大
.box {
width: 100px;
height: 100px;
background-color: blue;
}
// 注意 700 和 1000 上下的順序問題
@media (min-width:700px) {
.box {
background: green;
}
}
@media (min-width:1000px) {
.box {
background: red;
}
}
2.3pc端->移動端的適配規(guī)則：max-width從大到小
@media (max-width: 1000px) {
.box {
background: green;
}
}
@media (max-width: 700px) {
.box {
background: red;
}
}
3.響應斷點（閾值）的設(shè)定
三、響應式柵格系統(tǒng)
四、實現(xiàn)斷點設(shè)定
五、響應式交互
利用：checked偽類利用js腳本
菜單按鈕
- 首頁
- 教程
- 論壇
- 娛樂
rem和em
html{
/* 1rem = 100px */
font-size: 100px;
}
/*
16 32px = 1em
如果元素本身沒有字體大小，那么,em基于父元素計算
如果元素本身有字體大小 那么 em基于本身的字體大小計算
rem是參考根元素的計算的
*/
/* div {
font-size: 2em;
width: 10rem;
height: 10rem;
border: 1px solid red;
} */
6.動態(tài)字體的計算