資訊專欄INFORMATION COLUMN
摘要：一直對頁面充滿崇敬揣著忐忑的心開始了我的之旅。但實際情況卻并非如此理由如上但在移動設備上，必須弄明白這點。其他品牌的移動設備也是這個道理。
一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發現直接照抄網上的方案是很容易,但是想真的了解內部的原理,這就給我了一個下馬威了.通過在網上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用于積累知識,如有問題,歡迎指正!
在開始做手機端適配的時候我們需要去了解一些概念 1.設備像素先來看看很多資料上面的描述
它是物理概念，指的是設備中使用的物理像素(Physic pixel)。這個單位用px表示，它是一個[相對絕對單位]———— 即在同樣一個設備上，每1個設備像素所代表的物理長度(如英寸)是固定不變的(即設備像素的絕對性); 但在不同的設備之間，每1個設備像素所代表的物理長度(如英寸)是可以變化的(即設備像素的相對性);
總結的說: 就是像素就相當于我們日常所說的的厘米(cm)、米(m)、克(g)這些度量單位,但稍微有些不同的是它是個相對單位,對于不同的設備中它對應的英寸數是不一樣的.設備像素就是這個設備上總共有多少個這樣的單位像素
2.css中的px 等同于設備獨立像素這個也是一個相對單位,所以它在一個設備中具體表現為多少英尺不確定,除受到設備寬度影響外還有以下兩點可以影響它。
1、屏幕布局視口大小 2、屏幕的分辨率
由上概念我們知道 1設備像素 ≠ 1css像素
那為什么我們以前在做web端網頁的時候沒有考慮過這個問題呢?在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻并非如此(理由如上),但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始,蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，分辨率也是五花八門，安卓設備上的一個css像素相當于多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。
這兩個概念不同對我們在開發h5頁面產生什么樣的影響呢,哈哈,應該你會說這不廢話嗎,當然是不能夠將設計師的設計稿百分百的還原到手機上,嗯,是的你說的沒錯,那怎樣才能做到百分百的還原呢?這里面先買個關子,后面我們慢慢來分析.
3.設備分辨率(設備分辨率的單位就是上面所說的設備像素)先來一張圖
分辨率這個概念相信大家接觸的都不少,我們都知道同種寬高屏幕下分辨率越高屏幕的清晰度也就越高.為什么這樣呢?因為設備像素就是屏幕中一個個的點,設備分辨率就是橫向點的個數 * 縱向點的個數, 這一個點就是一個一個的馬賽克色塊,同物理寬度的范圍內這種馬賽克色塊越多顯然我們看到的顏色也就越清晰.
設備分辨率在設備出廠時就已經定了,并不能更改了.讀到這可能有人就有疑惑了,我們在用電腦的時候可都是可以調節分辨率的
電腦上面調整分辨率的時候,其實我怎么調它的像素點數還是那么多的.不信你看電腦,人家系統給你推薦的是1366px 768px的分辨率,你知道意味著什么嗎？沒錯，微軟在這塊屏幕上橫向設置了768個像素，豎向設置1366個像素。再怎么拉扯，這個數字是不會變了。那么，為啥我還能調整分辨率呢？我要是調整到800px 600px，按照定義，橫向就是60個像素，豎向就是800個像素了啊。其實呢，你把分辨率調800 600,系統就會分配給你800 600個有效像素個數，也就是真實的色彩塊。其他的個數呢，就由系統自作主張，通過一系列運算給你一個模擬色彩塊，填充成正好1366*768個色彩塊。這些拿來充數的像素塊，和真實的像素塊放到一起。就好比一個正規軍，里面摻了很多雜牌軍一樣，只能是隊伍不好帶了4.屏幕像素密度(PPI,每英尺展示的像素塊數)
計算公式 PPI = 屏幕對角線的像素數/屏幕對角線的長度。
由此我們可以知道PPI越大屏幕的清晰度越高
布局視口,布局視口是看不見的，瀏覽器廠商設置的一個固定值，一般是768px~1024px之間。這里我們可以認為它是一個畫板用于展示網頁。
視覺視口,瀏覽器可視區域的大小，即用戶看到的網頁的區域,繼承布局視口的寬度,所以我們在一個布局視口為980px的瀏覽器上一行上是可以放980px(css像素)內容的.
理想視口,它對設備來說是最理想的布局視口，用戶不需要對頁面進行縮放就能完美的顯示整個頁面。這個理想的寬度是指以CSS像素單位計算的寬度，即屏幕的邏輯像素寬度，跟設備的物理寬度沒有關系。在css中，這個寬度就相當于100%的所代表的那個寬度。
6.那我們該怎么做才能百分百的還原網頁呢?首先我們先想想上面這些所帶來的影響:
1px 的css像素不代表1設備像素了,這樣在dpr>1的時候,我們會明顯的發現我們設置的1px像素的東西明顯的看著粗一些
頁面無法相對于設計稿等比例的縮放
我們的目的是將1設備像素等于1css像素,鑒于這個目的我們說說我的方案.具體代碼可看我寫的demo
根據不同屏幕來動態寫入font-size和改變布局視口，并以rem作為寬度單位
1.使用meta標簽對viewport進行設置達到1css像素等于1個設備像素 以dpr為2為例 即
解釋: 首先我們要知道如果不設置meta viewport標簽，那么移動設備上瀏覽器默認的layout viewport寬度值為980px，1024px等這些,所以第一步我們先將視口寬度設置和布局寬度一樣即在html頭部設置（這個時候我們不做下一步的操作也能做到自適應網頁，但有1px的問題存在，我們可以通過接下來的這一步來解決這個問題）。然后通過js來獲取不同的dpr獲取scale=1/dpr來設置這樣設置就可以解決1px的問題了
2.將屏幕分為固定的塊數10：作為1rem所代表的px值 ,并給html設置font-size為這個值
注:屏幕即布局視口可通過document.documentElement.clientWidth獲得.這里將屏幕分成10等份,當然你也可以分成其他等份,不過最好是10的倍數,這樣我們算出的rem小數點也會少些,這樣還原度也會高些)`
這樣在任何屏幕下，總長度都為10rem。1rem對應的值也不固定，與屏幕的布局視口寬度有關。
3.量取psd獲得px值并除于1個rem代表的px數獲得對應rem值,這個轉化有多種方式我主要用過以下兩種方式
使用sublime text中的插件來實現轉換,具體怎么做可參照這個
使用postcss的插件postcss-pxtorem,具體可參照
關于文字 : 我這邊用的方案中字體大小也是使用rem，也就意味著我們的段落文字隨著屏幕增大，等比例縮放，這樣一行所展示的文字個數也一樣。這只是其中的一個方案，還有一種文字不使用rem作為單位，這樣就需要針對字體做特殊的處理，使用一些預處理或者后處理的方式，針對dpr不同計算出不同dpr下文字對應的大小，這種方案可參考中有說明;
總結哈哈,終于將這篇文章寫完了,總結一哈
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95709.html
摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。 從零搭建移動H5開發項目實戰 前端H5的前世今身 在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...
摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。 從零搭建移動H5開發項目實戰 前端H5的前世今身 在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...
摘要：在移動端頁面當中，其中適配是經常會遇到的問題，這塊主要有死個方法可以適用。目前全網找或者是嘗試來看，確實沒有一個十全十美的適配的解決方案，只能不斷在實踐應用當中慢慢填坑最近做了兩個關于h5頁面對接公眾號的項目，不得不提打開微信瀏覽器內置地圖導航的功能確實有點惡心。下次想起來了的話，進行總結分享一下如何處理。在vue移動端h5頁面當中，其中適配是經常會遇到的問題，這塊主要有死個方法可以適用。 ...
閱讀 2206·2021-11-19 09:40
閱讀 1924·2021-11-08 13:24
閱讀 2460·2021-10-18 13:24
閱讀 2863·2021-10-11 10:57
閱讀 3588·2021-09-22 15:42
閱讀 1121·2019-08-29 17:11
閱讀 2532·2019-08-29 16:11
閱讀 2426·2019-08-29 11:11
