解決PC端和移動端自適應問題？

通常需要考慮到不同電腦螢幕尺寸，以及不同手機螢幕大小等問題，解決樣式發生改變的情況，現在主要是採用自適應來解決高度，寬度的，以及自適應問題

現在有很多人的ie瀏覽器都公升級到ie9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是ie9的瀏覽器，但是瀏覽器的文件模式卻是ie8 為了防止這種情況，我們需要下面這段**來讓ie的文件渲染模式永遠都是最新的

這段**後面加了乙個chrome=1，如果使用者的電腦裡安裝了 chrome，就可以讓電腦裡面的ie不管是哪個版本的都可以使用webkit引擎及v8引擎進行排版及運算，如果沒有安裝，就顯示ie最新的渲染模式。

1、最小尺寸解析度1024*768（傳統17寸顯示器），則可以採用940px、960px、或者常用的980px作為最小寬度。 ----

在可視區域的寬度小於 600px 的時候被應用。

@media screen and (max-width: 600px)

}在可視區域的寬度大於 900px 的時候被應用。

@media screen and (min-width: 900px)

}就是區間，如果對min 就是如果寬度在大於min就應用， max 如果寬度小於max 就應用

直接在link中判斷裝置的尺寸，然後引用不同的css檔案：

not: not是用來排除掉某些特定的裝置的，比如 @media not print（非列印裝置）。

only: 用來定某種特別的**型別。

僅電腦裝置中的頁面最大可見區域寬度為 1068px 時

顯示其定義的樣式。

@media only screen and (max-width: 1068px)

all: 所有裝置，這個應該經常看到。

@media screen and (min-width: 1200px)

@media screen and(min-width: 960px) and (max-width: 1199px)

@media screen and(min-width: 768px) and (max-width: 959px)

@media screen and(min-width: 480px) and (max-width: 767px)

@media screen and (max-width: 479px)

@media (min-width: 768px)

@media (min-width: 992px)

@media (min-width: 1200)

@media (max-width: 1199)

@media (max-width: 991px)

@media (max-width: 767px)

@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中較大的那個