在pc端，螢幕1200兩端留白
在pe端就不行，首先它沒有1200px那麼大的寬度，其次不能留白，很醜
就需要在手機螢幕上鋪滿內容
viewport
在移動裝置上進行網頁的重構或者開發，首先我們就要搞明白viewport，只有弄明白viewport概念以及與其相關的meta標籤的使用，才能更好的讓我們的網頁適配或者響應不同解析度的移動裝置
裝置螢幕上能用來顯示我們網頁的那一塊區域
獲取視口大小：document.documentelement.clientwidth
移動裝置上的瀏覽器會把自己預設的視口大小設為980px或者1024px（由裝置決定的）
各個瀏覽器預設的視口大小
使用缺省視口給網頁帶來的後果：出現橫向滾動條
因為瀏覽器的可視區域是比這個預設的視口大小要小一些
css中的1px在不同裝置或不同環境下都不一樣
在早先的移動裝置上，（iphone3上，css的1px確實等於裝置的1px）
但是在iphone4開始，蘋果公司高分子顯示屏，會使解析度提高一倍從而使得螢幕更加的清晰，但是螢幕尺寸卻沒有變化，這意味著同樣大小的螢幕上，畫素提高了一倍，在這個時候，css中的1px是等於兩個物理畫素的，其他移動裝置也是這個道理
還有乙個點，雙指放大功能，如果使用者吧頁面放大一倍，那麼css中的1px也會相應的增加一倍，反之一樣
利用meta標籤對viewport進行控制
在蘋果的規範中，meta viewport有6個屬性
width
設定viewport的寬度
initial-scale
設定頁面的初始縮放值，為乙個數字，可以是小數
minimum-scale
允許使用者的最小縮放值
maximum-scale
允許使用者的最大縮放值
height
設定viewport的高度（沒什麼卵用）
user-scalable
是否允許使用者進行縮放
這些屬性可以同時使用，也可以單個使用，多個屬性之間用逗號隔開
那麼剛剛的meta標籤有什麼作用呢？
寬度等於當前裝置的寬度，初始縮放倍數：1，最大縮放倍數：1，不允許使用者進行縮放操作
怎麼把螢幕鋪滿：rem
w3cschool中給出的css尺寸單位：
單位描述
%百分比
in英吋
cm厘公尺
mm公釐
px畫素（計算機螢幕上的乙個點）
pc12點活字（1pc等於12點）
pt磅（一磅等於1/72英吋）
ex乙個ex是乙個字型的x-height（通常是字型尺寸的一半）
em1em等於當前的字型尺寸
2em等於當前字型尺寸的2倍
例如：如果某元素以12px顯示，那麼2em就是24px
在css中em是非常有用的單位，因為它可以自動適應使用者所使用的字型
rem是什麼
前面說「em」是相對與其父元素來設定字型大小，那麼這樣就會存在一些問題，進行任何的元素設定，我們都需要知道其父元素的大小，在我們多次使用的時候，就會帶來無法預知的錯誤，但是rem是相對於根元素，這樣的話，我們就只需要在根源上確定乙個參考值
瀏覽器的相容性
rem是css3新引進來的乙個度量單位，那麼瀏覽器對其的支援情況是否樂觀？
比如說火狐，蘋果瀏覽器，谷歌瀏覽器都相容，有乙個不相容那就是ie8（好慘）
以前的手機螢幕大小：320px
有乙個好辦法，將螢幕分成16份 每乙份就是320/16=20px
如果乙個div100px，5份
一直延續下來，一直是16份
由於技術的更新導致pe端裝置螢幕解析度變高，所以再分成十六份的話就會出現小數，不利於計算，所以我們只取一位小數四捨五入
移動端網頁設計基礎
在pe端就不行，首先它沒有1200px那麼大的寬度，其次不能留白，很醜 就需要在手機螢幕上鋪滿內容 viewport 在移動裝置上進行網頁的重構或者開發，首先我們就要搞明白viewport，只有弄明白viewport概念以及與其相關的meta標籤的使用，才能更好的讓我們的網頁適配或者響應不同解析度的...
移動端網頁設計基礎
在pc端，螢幕1200兩端留白 在pe端就不行，首先它沒有1200px那麼大的寬度，其次不能留白，很醜 就需要在手機螢幕上鋪滿內容 viewport 在移動裝置上進行網頁的重構或者開發，首先我們就要搞明白viewport，只有弄明白viewport概念以及與其相關的meta標籤的使用，才能更好的讓我...
用 Media Queries 設計移動網頁端
今天來通過media queries樣式模組，可以實現根據移動裝置的螢幕大小，定製 頁面的不同布局效果。它的優點是開發者只需要實現一套頁面，就能夠在所有平台的瀏覽器下訪問 的不同效果。用 viewport 設定適應移動裝置螢幕大小 1 什麼是 viewport 如果開發者沒有定義這個虛擬視窗，移動版...