使用@media怎么實現移動端自適應樣式

本篇文章給大家分享的是有關使用@media怎么實現移動端自適應樣式，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

通用手機端樣式：

@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的設備}

根據不同的設備設定的樣式：

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

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

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

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

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

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

附上一個小例子

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

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

主要注意的語法是：

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

以上就是使用@media怎么實現移動端自適應樣式，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。