1、最小尺寸解析度1024*768（傳統17寸顯示幕），則可以采用940px、960px、或者常用的980px作為最小寬度，
簡單理解為可視區域最大寬度為600px，即大于600px下不生效，
@media screen and (max-width: 600px) {
.class {
background: #fff;
}
}簡單理解為可視區域最小寬度為900px，即大于900px下生效，
@media screen and (min-width: 900px) {
.class {
background: #fff;
}
}
總結為：如果對min 就是如果寬度在大于min時生效， max 如果寬度小于max 時生效，
直接在link中判斷設備的尺寸，然后參考不同的css檔案：
mediatype:
all——用于所有多媒體設備
print——用于列印機
screen——用于電腦、平板、智能手機等
speech——用于螢屏閱讀器
not: not是用來排除掉某些特定的設備的，比如 @media not print（非列印設備），
only: 用來定某種特別的媒體型別，
僅電腦設備中的頁面最大可見區域寬度為 1068px 時
顯示其定義的樣式，
@media only screen and (max-width: 1068px)
all: 所有設備，這個應該經常看到，
@media screen and (min-width: 1200px) { css-code; }
@media screen and(min-width: 960px) and (max-width: 1199px) { css-code; }
@media screen and(min-width: 768px) and (max-width: 959px) { css-code; }
@media screen and(min-width: 480px) and (max-width: 767px) { css-code; }
@media screen and (max-width: 479px) { css-code; }
只寫max-width的話由大像素寫到小像素，min-width按小像素到大像素的順序
@media (min-width: 768px){ //>=768的設備 }
@media (min-width: 992px){ //>=992的設備 }
@media (min-width: 1200){ //>=1200的設備 }
@media (max-width: 1199){ //<=1199的設備 }
@media (max-width: 991px){ //<=991的設備 }
@media (max-width: 767px){ //<=768的設備 }
@media (min-width:321px) and (max-width: 639px){
}
@media與@media screen的區別了吧，沒錯，@media screen的css在列印設備里是無效的，而@media在列印設備里是有效的，這就是它們的區別了，
px : 我們最基礎的單位（像素）
em : 相對于當前父節點字體的大小 ---- 1em = 父節點字體大小
rem: 相對于當前根節點字體的大小 ---- 1rem = 根（html）節點字體大小
vw: 當前視窗寬度 ---- 1vw = 1%視窗寬度
vh: 可以理解成當前一個螢屏高度（一頁高度） ---- 1vh = 1%視窗寬度
vmin: vw和vh中較小的那個
vmax: vw和vh中較大的那個
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/246569.html
標籤：其他
上一篇：js的值型別和參考型別