移動端適配

plokmju88 發布于2019-08-02 16:16 / 1848人閱讀

摘要：在端，的一般對應著電腦屏幕的個物理像素，但在移動端，的等于幾個物理像素是和屏幕像素密度有關的。也被稱為視網膜顯示屏。設備像素比設備像素比簡稱為，物理像素與設備獨立像素的比例。

在說具體內容之前，我們必須了解幾個概念，就是：Retina屏、物理像素、設備獨立像素、設備像素比
在CSS中我們一般使用px作為單位，需要注意的是，CSS樣式里面的px和物理像素并不是相等的。CSS中的像素只是一個抽象的單位，在不同的設備或不同的環境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般對應著電腦屏幕的1個物理像素，但在移動端，CSS的1px等于幾個物理像素是和屏幕像素密度有關的。

Retina屏

所謂“Retina”是一種顯示標準，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度。由摩托羅拉公司研發。最初該技術是用于Moto Aura上。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的多帶帶像素。也被稱為視網膜顯示屏。

Retina屏一般在蘋果公司的產品上用的比較多，諸如MacBook、iPad、iPhone等

以MacBook Pro with Retina Display為例，工作時顯卡渲染出2880x1800個像素，其中每四個像素一組，輸出原來屏幕的一個像素顯示的大小區域內的圖像。這樣一來，用戶所看到的圖標與文字的大小與原來的1440x900分辨率顯示屏相同，但精細度是原來的4倍，但對于特殊元素，如視頻與圖像，則以一個圖片像素對應一個屏幕像素的方式顯示。故不會產生Windows中分辨率提升使屏幕文字與圖像變小，造成閱讀困難的問題。這樣在設計軟件時只需將所有的UI元素的精細度都提高到原來的4倍就可以既保持了觀看舒適度，又提高了顯示效果。

2.物理像素(physical pixel)

物理像素又被稱為設備像素、設備物理像素，它是顯示器（電腦、手機屏幕）最小的物理顯示單位，每個物理像素由顏色值和亮度值組成。所謂的一倍屏、二倍屏(Retina)、三倍屏，指的是設備以多少物理像素來顯示一個CSS像素，也就是說，多倍屏以更多更精細的物理像素點來顯示一個CSS像素點，在普通屏幕下1個CSS像素對應1個物理像素，而在二倍Retina屏幕下，1個CSS像素對應的卻是4個物理像素（參照上面Retina屏的原理下文田字示意圖理解）。

設備獨立像素(device-independent pixel)

設備獨立像素是我們寫CSS時所用的像素，它是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。

設備像素比(device pixel ratio)

設備像素比簡稱為dpr，物理像素與設備獨立像素的比例。

當這個比率為1:1時，使用1個設備像素顯示1個css像素。當這個比率為2:1=2時，使用4(2-2)個設備像素顯示1個css像素。當這個比率為3:1=3，使用9(3-3)個設備像素顯示1個css像素。

這里要注意，dpr=2,并不是物理像素是設備獨立像素的2倍，而是用4個物理像素去表示1個設備邏輯像素應該說1個設備獨立像素是1個物理像素的4倍，因為你4個網物理像素才代表我1個設備獨立像素dpr只代表一個數字比例，不是倍數關系。

CSS的1px等于幾個物理像素，除了和屏幕像素密度dpr有關，還和用戶縮放有關系。例如，當用戶把頁面放大一倍，那么CSS中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，CSS中1px所代表的物理像素也會減少一倍。關于這點，在文章后面的1px細線問題部分還會講到。

viewport

viewport就是設備上用來顯示網頁的那一塊區域，但viewport又不局限于瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。

在默認情況下，一般來講，移動設備上的viewport都是要大于瀏覽器可視區域的，這是因為考慮到移動設備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其它值，這個是由設備自己決定的），但帶來的后果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。

這里要認清三種視口

　1. visual viewport?可見視口，指屏幕寬度
　2. layout viewport?布局視口，指DOM寬度
　3. ideal viewport?理想適口，使布局視口就是可見視口即為理想視口

獲取屏幕寬度(visual viewport)的尺寸：window. innerWidth/Height
獲取DOM寬度(layout viewport)的尺寸：document. documentElement. clientWidth/Height

設置理想視口ideal viewport：

該meta標簽的作用是讓layout?viewport的寬度等于visual viewport的寬度，同時不允許用戶手動縮放，從而達到理想視口。　

　meta[name="viewport"]里各參數的含義為：

　　width: 設置layout viewport?的寬度，為一個正整數，或字符串”width-device”。

　　initial-scale: 設置頁面的初始縮放值，為一個數字，可以帶小數。

　　minimum-scale: 允許用戶的最小縮放值，為一個數字，可以帶小數。

　　maximum-scale: 允許用戶的最大縮放值，為一個數字，可以帶小數。

　　height: 設置layout viewport?的高度，這個屬性對我們并不重要，很少使用。

　　user-scalable: 是否允許用戶進行縮放，值為“no”或“yes”。

rem適配

哇卡卡卡，終于說到移動端屏幕適配方案了，可能大家看的想罵娘了，不過別急啊，上面的東西弄不清楚，下面是適配也聽不懂啊

rem是相對于根元素的字體大小的單位，也就是html的font-size大小，瀏覽器默認的字體大小是16px，所以默認的1rem=16px，我們可以根據設備寬度動態設置根元素的font-size，使得以rem為單位的元素在不同終端上以相對一致的視覺效果呈現。

事實上 rem是把屏幕等分成指定的份數，以20份為例，每份為 1rem ， 1rem 對應的大小就是 rem基準值，rem做的就是把 rem基準值給的 font-size ，所以如果設備的物理像素寬為 640px?，分成20份，那么 1rem=640px/20=32px , 的 font-size為32px 。

//這段代碼放在head標簽里面
(function () {
    var html = document.documentElement;
 
    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + "px";
    }
 
    window.addEventListener("resize", onWindowResize);
    onWindowResize();
})();

當然，你也可以分成30份，40份，60份等等，這個看自己的喜好了

在我們實際切圖的時候，對于視覺稿上的元素尺寸換算，只需要元素的原始的px值(即你量的大小) 除以 rem基準值即可。例如設計稿的大小為640px， rem基準值 = 640px/20 = 32px ，有個元素的大小你量出來是 140px286px* ，那么換算過來就是：

140px = 140/32 = 4.375rem
286px = 286/32 = 8.9375rem

這樣我們就可以用rem來代替像素px了，?而且在所有的移動端都是自適應的

這個方法目前是比較好的適配方法，只是rem在計算時很麻煩，有很多小數，這個時候大家可以試一下用less.js解決rem的小數問題

rem+vw適配

什么是vw和vh?

vw : 1vw 等于視口寬度的1%
vh : 1vh 等于視口高度的1%
vmin : 選取 vw 和 vh 中最小的那個
vmax : 選取 vw 和 vh 中最大的那個

用視口單位度量，視口寬度為100vw，高度為100vh（左側為豎屏情況，右側為橫屏情況）

例如，在桌面端瀏覽器視口尺寸為650px，那么 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支持0.5px，那么實際渲染結果可能是7px）

注意：這里的1%是指占視口的1%，而不是我們定義的div的1%

如何利用rem+vw進行屏幕適配呢？我們以設計稿為750px為基準

第一步：設置meta標簽

第二步：設置html的font-size大小

html{
    font-size:13.33333333vw
}

為什么font-size=13.33333333vw?

下面分析下原理吧, 上面我們說了vw表示1%的屏幕寬度,而我們的設計稿通常是750px的,屏幕一共是100vw,對應750px,那么1px就是0.1333333vw,。

同時我們知道rem,rem是相對html元素的字體大小，為了方便計算,我們取html的font-size=100px,通過上面的計算結果1px是0.13333333vw,那么100px就是13.333333vw了

所以，我們讓1rem=100px=13.333333vw

那么在項目上就很好地可以進行使用了

當我們通過ps測量一個div的大小為 width:200px,height:137px時，我們就可以這樣寫，ps量出來的像素直接除以100，計算小數很方便

div {
  width: 2rem;
  height:1.37rem;
 
 }

是不是相對于前面的rem適配來說，不用去計算小數了呢？

作者：油炸皮卡丘
來源：CSDN
原文：https://blog.csdn.net/im_dogg...
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

GPU云服務器云服務器移動端適配移動端適配方案移動端適配 js 移動適配

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/55006.html

移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
移動端適配方案

摘要：業務環境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候將注意力集中在中間區域。移動端適配方案移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業務場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。整體寬高其實移動端適配就和下面的玩具一樣，...

feng409 2019-08-30 15:54 評論0 收藏0
rem, vw, 還是...? 各憑本事的移動端適配方案

摘要：另一種就是不縮放，對等問題單獨引入處理方案。彩蛋部分相信大多數同學也是有想法在實際開發中把融入到現有的移動端適配方案中的。前言 2018年最后的法定假期都已經結束了，我相信大部分正在進行或曾經進行過移動端頁面開發的同學都或多或少的了解過使用rem進行移動端頁面適配的方案以及使用vw的方案，(沒了解過的同學可以參見大漠老師的這兩篇文章使用Flexible實現手淘H5頁面的終端適配和再...

wangbinke 2019-08-29 16:56 評論0 收藏0
rem, vw, 還是...? 各憑本事的移動端適配方案

摘要：另一種就是不縮放，對等問題單獨引入處理方案。彩蛋部分相信大多數同學也是有想法在實際開發中把融入到現有的移動端適配方案中的。前言 2018年最后的法定假期都已經結束了，我相信大部分正在進行或曾經進行過移動端頁面開發的同學都或多或少的了解過使用rem進行移動端頁面適配的方案以及使用vw的方案，(沒了解過的同學可以參見大漠老師的這兩篇文章使用Flexible實現手淘H5頁面的終端適配和再...

tianren124 2019-08-23 12:21 評論0 收藏0
我對移動端適配的了解

摘要：隨著移動端的發展，在手機上看電腦端的頁面已成為非常普及現象。方案一固定高度，使其寬度自適應這也是我接觸移動端適配第一次使用的方案。不知不覺做前端已經兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應用(手機廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發展對于大前端發展是喜聞樂見的，這次的快應用的手機廠...

import. 2019-08-30 14:16 評論0 收藏0
我對移動端適配的了解

摘要：隨著移動端的發展，在手機上看電腦端的頁面已成為非常普及現象。方案一固定高度，使其寬度自適應這也是我接觸移動端適配第一次使用的方案。不知不覺做前端已經兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應用(手機廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發展對于大前端發展是喜聞樂見的，這次的快應用的手機廠...

snowLu 2019-08-22 15:45 評論0 收藏0