自適應(響應式)網頁中的幾個關鍵分辨率

現在移動端設備的普及下，除了辦公和游戲外，使用電腦的次數越來越少，基本上都成為了低頭一族。而這苦了一些網頁前端的設計人員，為了能讓網頁適應PC端又同時適配移動端，自適應響應式網頁就成為了當前的主流。 自適應網頁在不同設備或不同分辨率下，顯示的布局是不同的。為了不讓頁面變形，而更好來美化網頁，我們可以利用 @media screen 實現網頁布局的自適應。 @media screen 雖然可以實現網頁布局的自適應，但是怎樣兼容所有主流設備就成了問題。到底分辨率是多少的時候設置呢？

@media screen 使用方法

下面的代碼是我們從 bootstrap 遍歷出來的關於控制自適應的代碼

@media print
@media (min-width: 768px)
@media (min-width: 992px)
@media (min-width: 1200px)
@media (max-width: 767px)

說明：從上頁的代碼中，我們不難看出 min-width 來確認分別是768、992、1200的分辨率。當然以前也有些老的設備寬度是600、480的，那些小分辨率的我們都歸類為小於767的。為什么是小於767而不是768呢，那是因為在css中 @media (min-width:768px) 表示最小是768也就是>=768，這里有等於，所以我們判斷更小的設備用 @media (max-width: 767px) 表示<=767就不會有沖突了。 @media screen 最小寬度 從上面的代碼中，可以看出有幾個臨界點的分辨率，通過他們我們可以寫出自己的自適應代碼。

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

注意下它們順序，如果你把 @media (min-width: 768px) 寫在了下面那么很悲劇，如下面的代碼：

注意：此代碼為錯誤的寫法

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

因為如果是1440，由於1440>768那么你的1200就會失效。 我們用 min-width 時，要注意他們的排列順序，小的放上面大的在下面(從小到大)。

@media screen 最大寬度

既然我們可以使用 min-width，也可以使用 max-width 來進行分辨率的划分，max-width的排列順是大的在上面，小的在下面(從大到小)。

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

通過上面的舉例，我們可以靈活的來運用這些代碼，來達到網頁可以自適應各和設備的目的。

@media and (min-width: 1200px) {
	//>=1200px的設備
}
@media and (min-width: 960px) and (max-width:1199px) {
	//<=1199px and >=960px的設備:PC端
}
@media and (min-width: 768px) and (max-width:959px) {
	//<=959px and >=768px的設備：PC端
}
@media and (min-width: 640px) and (max-width:767px) {
	//<=767px and >=640px的設備：平板端或者手機橫屏
}
@media and (min-width: 480px) and (max-width:639px) {
	//<=639px and >=480px的設備：手機橫屏
}
@media and (min-width: 320px) and (max-width:479px) {
	//<=479px and >=320px的設備：手機豎屏
}
@media and (min-width: 240px) and (max-width:319px) {
	//<=479px and >=320px的設備：手機豎屏
}
@media and (max-width: 239px) {
	//<=239px的設備:手機豎屏
}

轉自：https://www.feiniaomy.com/post/265.html