一、基本概念
（1） css pixels與device pixels
css pixels： 瀏覽器使用的抽象單位， 主要用來在網頁上繪製內容。
device pixels： 顯示螢幕的的最小物理單位，每個dp包含自己的顏色、亮度。
等值的 css pixels在手機螢幕上佔多大的位置，這不是固定的，這取決於很多屬性。經過分析和總結，我們可以得出這麼一條公式： 1 css pixels = （devicepixelratio）^2 device pixels （^2是平方的意思，至於 devicepixelratio是什麼東西，後面會講解） 。
（2） ppi/dpi
ppi，有時也叫dpi，所表示的是每英吋所擁有的畫素（pixel）數目，數值越高，即代表顯示屏能夠以越高的密度顯示影象。（注：這裡的畫素，指的是device pixels。）搞清楚了ppi是什麼意思，我們就能很容易理解ppi的計算方式了，我們需要首先算出手機螢幕的對角線等效畫素，然後處以對角線（我們平常所說的手機螢幕尺寸就是說的手機螢幕對角線的長度），就可以得到ppi了。準確的計算公示大家可以參照下圖。比較有意思的是，根據公式計算出來的iphone 4的ppi為330，要比蘋果官方公布的326要高一點點。
同理，以htc g7為例，480*800的解析度，3.7英吋，算出來就是252的ppi。
（3） 密度決定比例
我們計算ppi就是為了知道一部手機裝置是屬於哪個密度區間的，因為不同的密度區間，對應著不同的預設縮放比例，這是乙個很重要的概念。
這些密度對應著乙個特定的縮放比例值，拿我們最熟悉的iphone4或4s來說，它們的ppi是326，屬於超高密度的手機。當我們書寫乙個寬度為320px的頁面放到iphone中顯示，你會發現，它竟然是滿寬的。這是因為，頁面被預設放大了兩倍，也就是640px，而iphone4或4s的寬，正是640px。
（4） viewport的使用
viewport總共有5個屬性，分別如下：
content=「在這些屬性裡面，我們重點關注target-densitydpi，這個屬性可以改變裝置的預設縮放。medium-dpi是target-densitydpi的預設值，如果我們顯式定義target-densitydpi=device-dpi，那麼裝置就會按照真實的dpi來渲染頁面。打個比方說，一張320*480的，放在iphone4裡面，預設是佔滿螢幕的，但如果定義了target-densitydpi=device-dpi，那麼只佔螢幕的四分之一（二分之一的平方），因為iphone4的解析度是640*960。height = ［ pixel_value |device-height］ ，
width = ［ pixel_value |device-width ］ ，
initial-scale = float_value ， minimum-scale = float_value ， maximum-scale = float_value ，
user-scalable =［yes | no］ ，
target- densitydpi = ［ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi］ 」 />
二、解決方案
（1） 簡單粗暴
如果我們按照320px寬的設計稿去製作頁面，並且不做任何的設定，頁面會預設自動縮放到跟手機螢幕相等的寬度（這是由於 medium-dpi是target-densitydpi的預設值，和不同密度對應不同縮放比例所決定的，這一切都是移動裝置自動完成的 ）。所以這種解決方案，簡單，粗暴，有效。但有乙個致命的缺點，對於高密度和超高密度的手機裝置，頁面（特別是）會失真，而且密度越多，失真越厲害。
（2） 極致完美
在這種方案中，我們採用 target-densitydpi=device-dpi，這樣一來，手機裝置就會按照真實的畫素數目來渲染，用專業的話來說，就是1 css pixels = 1 device pixels。比如對於 640*960的 iphone，我們就可以做出 640*960的頁面，在iphone上顯示也不會有滾動條。當然，對於其他裝置，也需製作不同尺寸的頁面，所以這種方案往往是使用**查詢來做成響應式的頁面。這種方案可以在特定的解析度下完美呈現，但是隨著要相容的不同解析度越多，成本就越高，因為需要為每一種解析度書寫單獨的**。下面舉個簡單的例子：
#header@media screen and （- webkit -device-pixel-ratio:0.75）
web前段示例
三國演義是中國四大古典名著之一，元末明初 家羅貫中所著，是中國第一部章回體歷史演義的 描寫了從東漢末年到西晉初年近100年的歷史風雲。勾股定理直角三角形 a2 b2 c2。no pain，no gain.h2so4是一種重要的工業原料，可用於製作肥料 洗滌劑等。註冊商標 谷歌搜尋 其他途徑 酷炫大方...
web前段基礎知識彙總 HTML css
前端 結構 樣式 行為 html 超文字標記語言，搭建網頁的結構 元素 標籤及標籤之間的內容這個整體 標籤的分類 1 塊級 p段落 h1 h6標題 div br換行 hr分割線 ul無序列表 ol有序列表 li列表項 dl定義列表 dt名詞 dd解釋 form表單域 table tr行 2 行內 s...
Web前段0001 html的一些知識
label 控制項標籤 method1 姓名 lable 在這裡插入 片 method2 nametype text lable 控制項分組 fieldset 健康資訊 for height 身高 type text name height for weight 體重 type text name ...