高清屏及適配不同設備的方案總結


本文過於陳舊,不建議閱讀!請查閱網上其他更新的內容!!

關於一些Retina,設備像素,移動適配的知識,網上一搜也是一大把,但是基本的東西並沒有變化太多。下面就我看過的一些有關於這方面的知識做一些總結(僅以個人的角度出發,所以有不全的地方還請大家諒解)。后面會有不定期的更新~每個知識點我都會在開關寫出引用地址,所以大家有不懂的可以看原文章~

一、關於設備像素比(devicePixelRatio)

出處:高清屏概念解析與檢測設備像素比的方法

所謂設備像素比(devicePixelRatio[dpr])指的就是物理像素(physical pixel)和獨立像素(device-independent pixels [dips])的比例。

基本公式就是:設備像素比 = 物理像素 / 設備獨立像素  //在某個方向上,x或者y

物理像素:就是我們經常所說的分辨率,如iphone 6 的分辨率就是750x1334

獨立像素:就是手機的實際視窗,如iphone 6的視窗就是375x667

所以iphone 6的設備像素比 = 750/375 = 2

當devicePixelRatio值等於1時(也就是最小值),那么它普通顯示屏

當devicePixelRatio值大於1(通常是1.5、2.0),那么它就是高清顯示屏。

 

二:適配方案

出處:高清屏概念解析與檢測設備像素比的方法

1.Media Queries媒體查詢(只能用於背景圖片)

通過-webkit-device-pixel-ratio-webkit-min-device-pixel-ratio-webkit-max-device-pixel-ratio進行媒體查詢,對不同dpr的設備,做一些樣式適配

1 .css{/* 普通顯示屏(設備像素比例小於等於1.3)使用1倍的圖 */ 
2     background-image: url(img_1x.png);
3 }
4 @media only screen and (-webkit-min-device-pixel-ratio:1.5){
5 .css{/* 高清顯示屏(設備像素比例大於等於1.5)使用2倍圖  */
6     background-image: url(img_2x.png);
7   }
8 }

2.JavaScript的解決方案

使用js對“window.devicePixelRatio”進行判斷,然后根據對應的值給Retina屏幕選擇圖像。

 1 $(document).ready(function(){
 2   if (window.devicePixelRatio > 1) {
 3     var lowresImages = $('img');
 4 
 5     images.each(function(i) {
 6       var lowres = $(this).attr('src');
 7       var highres = lowres.replace(".", "@2x.");
 8       $(this).attr('src', highres);
 9     });
10   }
11 });

3.使用SVG矢量圖像

 

三:多屏適配布局問題

出處:【原創】移動端高清、多屏適配方案

再談移動端適配和點5像素的由來

使用相對單位:rem

原理:針對不同手機屏幕尺寸和dpr動態的改變根節點html的font-size大小(基准值)。

任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。為了簡化font-size的換算,需要在css中的html選擇器中聲明font-size=62.5%,這就使rem值變為 16px*62.5%=10px, 這樣12px=1.2rem, 10px=1rem, 也就是說只需要將原來的px數值除以10,然后換上rem作為單位就行了。

當我們在根節點<html>設置了font-size基准值以后,在文檔中有使用rem單位的屬性值都是相對於根節點font-size的一個相對值。比如說一些元素的屬性如width,height,margin等。也正是這個原因,現在很多網站的移動端網站都在使用rem單位作為適配工具。

注意事項:

1.整體的布局還是使用百分比

2.使用rem的最佳場景是,遇到例如多列帶有圖片的列表,常常需要圖片固定寬高比

3.研究了一些網站,比如淘寶,對字體字體一般情況建議使用px

4.出現1px像素線的地方,仍舊使用border-width:1px;而不是border-width:.1rem

 

根據JS來動態計算rem值:根據iPhone6設計稿動態計算rem值

使用的時候,請將下面的代碼放到頁面的頂部(head標簽內);

 1 /**
 2  * [以iPhone6的設計稿為例js動態設置文檔 rem 值]
 3  * @param  {[type]} currClientWidth [當前客戶端的寬度]
 4  * @param  {[type]} fontValue [計算后的 fontvalue值]
 5  * @return {[type]}     [description]
 6  */
 7 <script>
 8     var currClientWidth, fontValue,originWidth;
 9     //originWidth用來設置設計稿原型的屏幕寬度(這里是以 Iphone 6為原型的設計稿)
10     originWidth=375;
11     __resize();
12 
13     //注冊 resize事件
14     window.addEventListener('resize', __resize, false);
15 
16     function __resize() {
17         currClientWidth = document.documentElement.clientWidth;
18         //這里是設置屏幕的最大和最小值時候給一個默認值
19         if (currClientWidth > 640) currClientWidth = 640;
20         if (currClientWidth < 320) currClientWidth = 320;
21         //
22         fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
23         document.documentElement.style.fontSize = fontValue + '%';
24     }
25     </script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM