一、viewport

PC上的網頁寬度一般最小都是1024像素,但是手機屏幕寬度沒這么大，瀏覽器可視區域的尺寸最大也不超過手機屏幕寬度，如果直接顯示PC版的網頁的話，會擠作一團，排版什么的都會亂掉，怎么辦呢？弄一個虛擬的網頁顯示視窗(viewport)，這個視窗比瀏覽器可視區域大就可以把PC上的網頁顯示在手機屏幕上了（移動設備上的瀏覽器會把自己的viewport設為980或1024），這就是viewport中的第一個概念，layout-viewport。

二、css中的px問題
px是一個抽象相對的像素單位，是指一個邏輯像素，在pc上1個邏輯像素就等于1個物理像素，但在移動端邏輯像素和物理像素并不相等，為什么呢？
移動端的屏幕尺寸非常小，如果1個物理像素等于1個邏輯像素的話，顯示出來的文字和圖片之類的清晰度不夠高不夠細膩，怎么辦呢？把物理像素提高，即在1個邏輯像素由更多的物理像素。

三、移動端圖片模糊的原因

位圖像素是柵格圖像（如：png,jpg,gif等）最小的數據單元。每一個位圖像素都包含著一些自身的顯示信息。（如：顯示位置，顏色值，透明度等）

理論上來說，1個位圖像素對應1個物理像素，圖片才能達到清晰的展示。

四、高清屏下html中1px的邊框比視覺圖中的粗

設計師在視覺標注圖上標明邊框為1像素，于是你在css中很愉快的寫下border:1px，結果悲劇了，在iphone6這種高清屏中看起來1px比較粗。

原因還是上面第2點的知識，1px不等于1個物理像素，在iphone6中1px等于2個物理像素，看著就會比視覺稿上的粗。

五、視覺稿如何還原？

為了適配高清屏，UI一般會以Iphone6的物理分辨率來設計視覺稿，即視覺圖的寬度為750px，為什么會選iphone6呢？因為iphone6的尺寸在手機屏幕尺寸中算是一個中間值。

還原視覺稿時，簡單粗暴的做法是直接將標注的尺寸除以2來確定寬高（除以2是因為iphone6的dpr為2,750個物理像素的寬度，在iphone6上只需要375個獨立像素就能鋪滿了），這么做在屏幕尺寸更大的手機上，兩邊就會留白，而在更小尺寸的屏幕上最會顯示不全。

轉載請注明：?蝸牛SEO? ? 移動網站開發中的一些概念