資訊專欄INFORMATION COLUMN
摘要：像素像素是一個相對單位。相對不同屏幕，其實際像素大小不同。解決方案直接使用實現(xiàn)的終端適配有興趣的小伙伴可以看下的解決方案使用實現(xiàn)手淘頁面的終端適配地址移動端適配單位的坑你知道多少關(guān)于移動端布局的一些總結(jié)
網(wǎng)頁尺寸單位
百分比（%）
英寸（in）
厘米（cm）
毫米（mm）
磅數(shù)（pt）
12 點活字（pc）
字母高度一半（ex）
父級字體（em）
像素（px）
根元素字體（rem）
相對于視窗的寬度（vw）
相對于視窗的高度（vh）
相對于視口的寬度或高度中較大的那個（vmax）
相對于視口的寬度或高度中較小的那個（vmin）
使用前可以在 http://caniuse.com/ 查看各個單位的瀏覽器兼容性設(shè)備像素
ppi(pixels per inch)設(shè)備像素表示每英寸所擁有的像素(pixel)數(shù)目，數(shù)值越高，代表屏幕能以更高的密度顯示圖像。
計算公式：ppi=像素數(shù)量/物理尺寸（英寸數(shù)）
設(shè)備獨立像素dips(device-independent pixels)設(shè)備獨立像素。
我們希望不同屏幕顯示圖片的大小要一致，我們要計算圖片縮放比例。
計算公式：圖片邏輯像素大小px1 / 圖片縮放后實際像素大小px2 = 設(shè)備像素dp / 設(shè)備獨立像素dips px2 = px1 * (dp / dips) px2 = px1 * dpr設(shè)備像素比
dpr(devicePixelRatio)是設(shè)備像素dp和設(shè)備獨立像素dips的比例。
dpr = dp / dips
css像素是一個相對單位。相對不同屏幕，其實際像素大小不同。
我們定義時，是定義其邏輯像素。即該圖要用多少個像素來顯示。
rem (root element)，這個是一個相對的單位。
與em的差別在于rem相對的是根節(jié)點html的font-size,em相對的是父元素font-size。
動態(tài)修改html的font-size，那么使用rem的元素的對應(yīng)單位實際像素也會相應(yīng)的改變，所以我們只要寫一份css就可以適配所有手機的屏幕了。雖然rem在某些瀏覽器下面不夠精準，但那也只是少數(shù)，如果需要非常精準的適配，那么可以使用js來計算html的font-size。
現(xiàn)在設(shè)計師給的移動端視覺稿，一般都是按照750px來設(shè)計的。當我們拿到視覺稿時，首先把視覺稿的寬度轉(zhuǎn)換為rem，我們并不需要考慮設(shè)備的分辨率，只需要按照
計算公式：視覺稿寬度 = font-size * rem
這個公式來計算就好了。視覺稿的寬度是我們以750px為例，font-size 與 rem 是兩個變量，我們只需要它們的乘積等于750即可。我們采用 定一變一的方式，假定rem=7.5，那么初始值font-size就必須等于 100px，我們就可以根據(jù)需要適配的屏幕寬度來等比例調(diào)整font-size。那么如果我們750px的視覺稿需要顯示成640px呢，我們只需要把font-size對應(yīng)的縮小就可以了。其他的各種的屏幕，只需要等比例縮放就好了。
js+sass計算方案JS動態(tài)設(shè)置font-size（簡單demo，如有需要最好加上DomContentLoaded和orientationchange的監(jiān)聽）：
fnResize();
window.addEventListener("resize", function() {
fnResize()
}, false);
function fnResize(){
var docWidth = document.documentElement.clientWidth,
body = document.getElementsByTagName("html")[0];
body.style.fontSize = docWidth / 32 + "px";
}
sass:
@function rem($px){
@return $px*(1/20)*1rem;
}
.ty_con{
minwidth: rem(300); /* 15rem */
}
rem問題及解決方案
問題：
部分安卓機rem計算出來的font-size總是要比預(yù)期要大一些或者小一些：華為，魅族......（小數(shù)保留問題）這樣會導致最后的計算是不準確的。
解決方案1:
在css的使用上寬度布局盡量使用百分比，flex和box-sizing來做，減少寬度計算誤差產(chǎn)生的問題。
icon雪碧圖的圖標之間留白，在寫寬度的時候多寫幾像素使圖標居中。
解決方案2:
在每次計算完頁面的fontSize后，對某個實際元素的大小進行判斷，如果對比原來的比例有0.2以上的出入，那就用這個比例去重新設(shè)置頁面的fontSize。如果是正常情況，就不會執(zhí)行頁面fontSize重新這一步。至此，問題也算是解決了。
解決方案3:
直接使用Flexible實現(xiàn)H5的終端適配
有興趣的小伙伴可以看下Flexible的解決方案：
使用Flexible實現(xiàn)手淘H5頁面的終端適配：http://www.w3cplus.com/mobile...
github地址：https://github.com/amfe/lib-f...
移動端Web適配單位rem的坑你知道多少 ：http://www.jianshu.com/p/8300...
關(guān)于移動端 rem 布局的一些總結(jié)： https://segmentfault.com/a/11...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113321.html
摘要：當明確規(guī)定根元素的時，單位以該屬性的初始值作參照。適配具體實現(xiàn)方案設(shè)計稿尺寸寬度為，如果設(shè)計稿是，下邊會自動計算的值比如，具體的尺寸不用調(diào)整例如，不用調(diào)整，這是一個比例大小，對應(yīng)的元素大小值會根據(jù)新的比如等于改變，從而按照比例適配。 前言 根據(jù) W3C 規(guī)范中對 1rem 的定義： 1rem 與等于根元素 font-size 的計算值。當明確規(guī)定根元素的 font-size 時，rem...
摘要：當明確規(guī)定根元素的時，單位以該屬性的初始值作參照。適配具體實現(xiàn)方案設(shè)計稿尺寸寬度為，如果設(shè)計稿是，下邊會自動計算的值比如，具體的尺寸不用調(diào)整例如，不用調(diào)整，這是一個比例大小，對應(yīng)的元素大小值會根據(jù)新的比如等于改變，從而按照比例適配。 前言 根據(jù) W3C 規(guī)范中對 1rem 的定義： 1rem 與等于根元素 font-size 的計算值。當明確規(guī)定根元素的 font-size 時，rem...
摘要：網(wǎng)頁單位絕對單位，代表屏幕中每個點。相對單位，每個元素透過倍數(shù)乘以根元素的值。和就是固定百分比為單位，為父層的，為父層的。 對于繪圖和印刷而言，單位相當重要，然而在網(wǎng)頁排版里，單位也是同樣具有重要性，在CSS3普及以來，更支持了一些方便好用的單位（px、em、rem…等），這篇文章將整理這些常用的CSS單位，也幫助自己未來在使用上能更加得心應(yīng)手。 網(wǎng)頁和印刷的單位若要把單位做區(qū)隔，最簡...
摘要：很多人會疑惑為什么有了之后還要使用，而且使用起來相對于來講比較麻煩。如下圖接下來，按住鍵并連續(xù)按減號鍵，對頁面不斷進行縮小。造成這種現(xiàn)象的主要原因是是相對大小，使用時對頁面進放大或縮小不會造成太大的影響。1、為什么使用em em也是css中的一種單位，和px類似。很多人會疑惑為什么有了px之后還要使用em，而且em使用起來相對于px來講比較麻煩。 em主要是應(yīng)用于彈性布局，下面給出一個小栗子...
閱讀 1306·2021-11-24 09:39
閱讀 2687·2021-09-30 09:47
閱讀 1339·2021-09-22 15:15
閱讀 2433·2021-09-10 10:51
閱讀 1976·2019-08-30 15:55
閱讀 2987·2019-08-30 11:06
閱讀 906·2019-08-30 10:53
閱讀 848·2019-08-29 17:26
