通用手機端樣式：

@media all and (orientation : portrait) {
/*豎屏*/
}
@media all and (orientation : landscape) {
/*橫屏*/
}

指定手機端高度樣式：

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960的設(shè)備}

根據(jù)不同的設(shè)備設(shè)定的樣式：

@media (min-width: 768px){ //>=768的設(shè)備 }
@media (min-width: 992px){ //>=992的設(shè)備 }
@media (min-width: 1200){ //>=1200的設(shè)備 }

注意下順序，如果你把@media (min-width: 768px)寫在了下面那么很悲劇，因為css文件是從上至下讀取的，后面的css優(yōu)先級會更高

@media (min-width: 1200){ //>=1200的設(shè)備 }
@media (min-width: 992px){ //>=992的設(shè)備 }
@media (min-width: 768px){ //>=768的設(shè)備 }

因為如果是1440,由于1440>768那么你的1200就會失效。

所以我們用min-width時，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的設(shè)備 }
@media (max-width: 991px){ //<=991的設(shè)備 }
@media (max-width: 767px){ //<=768的設(shè)備 }
 

附上一個小例子

<style type="text/css">
@media (max-width: 768px){
.change{
height: 100%;
float: right;
margin: 15px;
}
}
@media (min-width: 768px){
.change{
display: none;
}
}

可以看到根據(jù)屏幕尺寸的變化，上面導航欄也隨之出現(xiàn)變化，最后導航欄的所有條目都進入到一個右上角的按鈕中去了。
這個demo很簡單，只是拿來記錄一下自己第一個自適應demo

主要注意的語法是：

1、@media （max-width : 768 px）{
CSS code；
} 
//
“max-width 極限寬度：768px”主要表示在此控件寬度小于768px才執(zhí)行下列CSS code代碼塊，否則就照原本已存在CSS代碼執(zhí)行。
“min-width 最小寬度： 768px”主要表示在此控件寬度在大于768px才執(zhí)行下列CSS code塊。
2、
col-sm-6 col-md-4 col-lg-3
主要代表了bootstrap柵格系統(tǒng)，分別是對應不同小，中，大屏幕不同的柵格分布（橫行別分是2個，4個，3個，最小為1個）
 

以上就是@media移動端自適應樣式的使用方法介紹的全部內(nèi)容，希望對大家的學習和解決疑問有所幫助，也希望大家多多支持腳本之家。

最新評論