**查詢：
這段**的幾個引數解釋：
width = device-width：寬度等於當前裝置的寬度
initial-scale： 初始的縮放比例（預設設定為1.0）
minimum-scale：允許使用者縮放到的最小比例（預設設定為1.0）
maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）
user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）
html5要適應各種解析度的移動裝置，應該使用rem尺寸單位
@media (max-width: 320px)
@media (min-width: 321px) and (max-width:374px)
@media (min-width: 375px) and (max-width: 414px)
@media (min-width: 415px) and (max-width: 479px)
@media (min-width: 480px) and (max-width: 568px)
@media (min-width: 569px) and (max-width: 666px)
rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。
把與元素尺寸有關的css，如width,height,line-height,margin,padding等都以rem作為單位，這樣頁面在不同裝置下就能保持一致的網頁布局。
舉例來說，網頁有乙個.item類，設定了width為3.4rem，該類在不同解析度下對應的實際寬度如下：
321px <= device-width <= 375px，font-size:11px ---> .item的width：34px
376px <= device-width <= 414px，font-size:12px ---> .item的width：37.4px
415px <= device-width <= 639px，font-size:15px ---> .item的width：40.8px
640px <= device-width <= 719px，font-size:20px ---> .item的width：51px
720px <= device-width <= 749px，font-size:22.5px ---> .item的width：76.5px
750px <= device-width <= 799px，font-size:23.5px ---> .item的width：79.8999999px
800px <= device-width ，font-size:25px ---> .item的width：85px
bootstrap柵格布局
.col-xs-* 針對超小螢幕 手機（<768px）
.col-sm-* 小螢幕 平板 (≥768px)
.col-md-* 中等螢幕 桌面顯示器 (≥992px)(柵格引數)
.col-lg-* 針對特大的（≥1200px）
柵格化布局方法和思路其實都很簡單，就按照bootstrap的思路來，就是將乙個容器，寬度一定或100%的，用乙個分子去把這個容器分為很多份，bootstrap的方法是用百分比的方法來將這個容器分為n等份，這就是柵格化的思路，
rem只能在移動端進行布局，然後等比例的縮放，在pc端還是用px這種慣用的方法去實現比較好，rem並不能實現響應式布局，這是重要的缺點，rem只在移動端起到乙個比較好的作用，當然以後的發展會說不定，也可能還有人發明出厲害的設計方案。而百分比的布局，這種方式有一點是有很大問題的，他是無法做到定高的，這是為什麼，因為百分比定高，有時候bug很明顯，所以很多人用px定高，這樣不同解析度的手機會使得顯示不一樣。
網頁自適應pc端和移動端
手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有的還達到了2000畫素。同樣的內容，要在大小迥異的螢幕上，都呈現出滿意的效果，並不是一件容易的事。很多 的解決方法，是為不同的裝置提供不同的網頁，比如專門提供乙個mobile版本，...
pc端網頁自適應顯示在移動端
當我們將乙個pc端的網頁放到移動端的時候，移動端瀏覽器會將pc端的網頁按照一定的比例完整的顯示出來，這是因為移動端的瀏覽器預設的會將網頁渲染在乙個比例比較大的viewport中排版 ios預設的是980px，android4.0以上為980px 然後通過比例縮放看到整個頁面的全貌。但是,使用預設的v...
解決PC端和移動端自適應問題？
通常需要考慮到不同電腦螢幕尺寸，以及不同手機螢幕大小等問題，解決樣式發生改變的情況，現在主要是採用自適應來解決高度，寬度的，以及自適應問題 現在有很多人的ie瀏覽器都公升級到ie9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是ie9的瀏覽器，但是瀏覽器的文件模式卻是ie8 為了防止這種情...