你大聲的嚷著你的手機解析度就是1920*1080的，這是你攢了足足兩個月的錢後在小公尺官網買的紅公尺手機，絕不可能有假。
你寫了乙個寬為 960px 的 div，用手機的瀏覽器橫屏開啟後，你期望這個該死的 div 會和在電腦上的瀏覽器載入出來一樣的效果，只佔螢幕的一半。結果卻讓你納了血悶，明明電腦上解析度和手機解析度都是1920*1080，為何電腦上 960px 正好佔一半，手機上卻佔了一大半，幾乎佔滿了你手機的整個螢幕的寬。
然後你去問了前端大神這是怎麼回事，大神欲言又止，看起來並不太想仔細的給你解釋，可能是不太好一兩句話說清楚，他讓你去用**檢視瀏覽器實際的寬度，說是一看便知：
id>
div>
>
var str =
"clientwidth:"
+document.documentelement.clientwidth +
"，width:"
+ window.screen.width+
" clientheight:"
+ document.documentelement.clientheight+
"，height:"
+ window.screen.height;
console.
log(str)
;alert
(str)
; window.
onload
=function()
script
>
clientwidth:1280， width:1280 clientheight:720， height:720
看完你也明白了，瀏覽器解析度是 1280*720 的，原來瀏覽器的解析度和手機裝置實際解析度不一樣啊！
上面的兩個寬度，可以理解成乙個是瀏覽器非最大化時的寬度，隨著使用者拖動邊框大小會跟著變動，另乙個是瀏覽器最大化時的寬度，不會變。
ui 設計師給你的圖是 1920*1080 尺寸的，本來圖上某個塊是 100px*100px，你**裡就可以直接寫寬 100px，高100px，但是現在這個網頁要放到手機上載入，按你剛才得出的這個解析度比例，你全得除以1.5 寫成寬 66.66px。
等等，先不要忙著改了，因為實際上你並不能這麼做，因為你的手機瀏覽器解析度是 1280*720的，別人的手機可不一定，例如 iphone4 的螢幕解析度是 960*640，瀏覽器的解析度是 480*320 的，你不僅得按1920*1080的設計圖來適配 1280*720的瀏覽器解析度，還要適配 480*320 的解析度，所以你需要準備多套比例來適配。
基於rem的布局
首先要搞清 em 和 rem 的區別：
em 單位是參照元素自身文字大小來設定尺寸，例如乙個 p 標籤的 font-size是 20px，1em就等於20px，這時如果想設定兩個字的縮排，就可以設定text-indent為2em；
rem 是參照根節點 html 標籤的文字大小來設定尺寸，其它元素相關尺寸都用 rem，所有元素就都有了統一參照標準，改變 html 文字大小，就會改變所有用 rem 單位設定的尺寸。
計算方式：
例如設計圖是 720*1280 的尺寸，這時為了容易把 px 轉換到 rem 單位，建議把 html 標籤的 font-size 設定成100px，意思就是在 720*1280 尺寸上，1rem=100px，這樣一來，ui給的是什麼尺寸的圖，就按什麼尺寸的來開發，圖上量的是100px，就寫1rem，量的是234px就寫2.34rem。
為什麼不設定成1px？不是更好換算嗎？
因為前端規定 font-size 屬性最小值是12px，不能設定1，也不能設定10，所以有人設定成20px，實際設定成12px以上都沒問題，例如設定成20px時，設計圖上量的是100px，**中要寫100/20=5rem。
media方式
type
="text/css"
>
/* 設計稿為750寬度 750\*0.025=18.75 */
@media only screen and (
max-width
:480px)
}/*480/750*40 = 25.6*/
@media only screen and (
max-width
:320px)
}@media only screen and (
min-width
:640px)
}@media only screen and (
min-width
:720px)
}@media only screen and (
min-width
:750px)
}style
>
1rem*n=設計圖實際大小
a/750*n = 40
480解析度的font-size為 480/750*40=25.6px
如果最低想支援到480字型準確，即最低的12px，就是480/750*n=12px，計算結果n = 18.75，就意味著想要在480的解析度上顯示出來12px的字型，750這個基準解析度的放大倍數最低只能設定為18.75倍。
m/18.75*12 = 12，在基準設計圖上最低只能設計18.75px的字型，才能保證在最低支援的480寬的解析度上能正確顯示出12px的字型，如果設計圖上的字型小於18.75，換算到480上會小於12px，並被強制寫成12px，導致不準確。
注意，max-width:480意思是小於480時用這條style，相當於：
if
(width <=
480)
if(width <=
320)
所以按上面這種配置，當瀏覽器解析度寬度為730px時，html 的 font-size 就是38.4px，因為 730px 大於640px，小於750px，所以被適配到 720px這一檔。
(function()
;calc()
; window.
addeventlistener
('resize'
, calc);}
)()<
/script>
Android不同解析度適配
適配可以分為 layout land 橫屏布局 layout port 豎屏布局 layout 1920x1080 或者layout land 1920x1080 layout port 1920x1080 注 如果適配的布局檔案中，沒有當前機型，當前機型會選擇相差最小的解析度的配置檔案進行適配 l...
適配不同解析度螢幕
如今的螢幕解析度，小至320px iphone 大到2560px甚至更高 大顯示器 變化範圍極大。除了使用傳統的台式電腦，使用者會越來越多的通過手機 上網本 ipad一類的平板裝置來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性，其布局結構要做到根據不同的裝置及螢...
Android 適配不同 解析度和尺寸
如題，最近做乙個裝置介面，為了能夠適應不同的解析度 下面分享實現方法 首先 你需要在 androidmanifest.xml 檔案的元素如下新增子元素 supports screens android largescreens true android normalscreens true andr...