一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發現直接照抄網上的方案是很容易,但是想真的了解內部的原理,這就給我了乙個下馬威了.通過在網上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用於積累知識,如有問題,歡迎指正!
先來看看很多資料上面的描述
它是物理概念，指的是裝置中使用的物理畫素(physic pixel)。這個單位用px表示，它是乙個[相對絕對單位]———— 即在同樣乙個裝置上，每1個裝置畫素所代表的物理長度(如英吋)是固定不變的(即裝置畫素的絕對性); 但在不同的裝置之間，每1個裝置畫素所代表的物理長度(如英吋)是可以變化的(即裝置畫素的相對性);總結的說: 就是畫素就相當於我們日常所說的的厘公尺(cm)、公尺(m)、克(g)這些度量單位,但稍微有些不同的是它是個相對單位,對於不同的裝置中它對應的英吋數是不一樣的.裝置畫素就是這個裝置上總共有多少個這樣的單位畫素
這個也是乙個相對單位,所以它在乙個裝置中具體表現為多少英呎不確定,除受到裝置寬度影響外還有以下兩點可以影響它。
1、螢幕布局視口大小
2、螢幕的解析度
那為什麼我們以前在做web端網頁的時候沒有考慮過這個問題呢?
在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們的乙個錯覺，那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此(理由如上),但在移動裝置上，必須弄明白這點。在早先的移動裝置中，螢幕畫素密度都比較低，如iphone3，它的解析度為320x480，在iphone3上，乙個css畫素確實是等於乙個螢幕物理畫素的。後來隨著技術的發展，移動裝置的螢幕畫素密度越來越高，從iphone4開始,蘋果公司便推出了所謂的retina屏，解析度提高了一倍，變成640x960，但螢幕尺寸卻沒變化，這就意味著同樣大小的螢幕上，畫素卻多了一倍，這時，乙個css畫素是等於兩個物理畫素的。其他品牌的移動裝置也是這個道理。例如安卓裝置根據螢幕畫素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，解析度也是五花八門，安卓裝置上的乙個css畫素相當於多少個螢幕物理畫素，也因裝置的不同而不同，沒有乙個定論。這兩個概念不同對我們在開發h5頁面產生什麼樣的影響呢,哈哈,應該你會說這不廢話嗎,當然是不能夠將設計師的設計稿百分百的還原到手機上,嗯,是的你說的沒錯,那怎樣才能做到百分百的還原呢?這裡面先買個關子,後面我們慢慢來分析.
先來一張圖
解析度這個概念相信大家接觸的都不少,我們都知道同種寬高螢幕下解析度越高螢幕的清晰度也就越高.為什麼這樣呢?因為裝置畫素就是螢幕中乙個個的點,裝置解析度就是橫向點的個數 * 縱向點的個數, 這乙個點就是乙個乙個的馬賽克色塊,同物理寬度的範圍內這種馬賽克色塊越多顯然我們看到的顏色也就越清晰.
裝置解析度在裝置出廠時就已經定了,並不能更改了.讀到這可能有人就有疑惑了,我們在用電腦的時候可都是可以調節解析度的
電腦上面調整解析度的時候,其實我怎麼調它的畫素點數還是那麼多的.不信你看電腦,人家系統給你推薦的是1366px計算公式 ppi = 螢幕對角線的畫素數/螢幕對角線的長度。768px的解析度,你知道意味著什麼嗎？沒錯，微軟在這塊螢幕上橫向設定了768個畫素，豎向設定1366個畫素。再怎麼拉扯，這個數字是不會變了。那麼，為啥我還能調整解析度呢？我要是調整到800px 600px，按照定義，橫向就是60個畫素，豎向就是800個畫素了啊。其實呢，你把解析度調800
600,系統就會分配給你800 600個有效畫素個數，也就是真實的色彩塊。其他的個數呢，就由系統自作主張，通過一系列運算給你乙個模擬色彩塊，填充成正好1366*768個色彩塊。這些拿來充數的畫素塊，和真實的畫素塊放到一起。就好比乙個正規軍，裡面摻了很多雜牌軍一樣，只能是隊伍不好帶了
由此我們可以知道ppi越大螢幕的清晰度越高
首先我們先想想上面這些所帶來的影響:
我們的目的是將1裝置畫素等於1css畫素,鑑於這個目的我們說說我的方案.具體**可看我寫的demo
根據不同螢幕來動態寫入font-size和改變布局視口，並以rem作為寬度單位
這樣在任何螢幕下，總長度都為10rem。1rem對應的值也不固定，與螢幕的布局視口寬度有關。
哈哈,終於將這篇文章寫完了,總結一哈?
移動前端開發之viewport的深入理解
深入理解移動端畫素知識與viewport知識
meta viewport (視口元資訊標籤)
移動端頁面適配———多方案解析
移動端H5頁面適配
廢話不多說，直接上 以下例子均以ui設計圖為750px寬度作為標準進行轉換 1.rem加js適配 用原生方法獲取使用者設定的瀏覽器的字型大小 相容ie 心。該醫院初期主要研究女性性反應方面問題，後逐漸將女性盆骨健康問題和如何提高性功能也作為院內主要診療專案。醫院憑藉精湛的手術技術和出色的手術效果，在...
h5頁面的寫法 移動端h5頁面寫法
1.頁面寬度320，所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640，元素尺寸正常 暫未發現問題 3.頁面寬度640，js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...
h5 預設為移動端頁面 移動端H5頁面製作規範
計量單位的使用 css的計量單位有三種選擇 px 固定的相素值 em 相對父級元素的font size設定來作為當前元素1em所代表的畫素值，如父節點的font size 10px，當前節點的font size 1.2em,則當前節點的font size實為12px rem 相對根節點html的fo...