移動端高清、多屏适配方案——rem

背景：

開發移動端H5頁面
一套設計圖
不同尺寸的手機
不同分辨率的手機

方案：使用rem作為機關解決一套設計圖适應不同分辨率，不同尺寸的手機。

概念：

REM(font size of the root element). 相對于<html>的font-size的計算方式。
dpr(device pixel ratio).裝置像素比；i5,6 = 2;i6plus=3;
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
ve,vh:Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).“視區”所指為浏覽器内部的可視區域大小，即 window.innerWidth/window.innerHeight 大小.vw機關巧妙實作滾動條出現頁面不跳動

思路：a,相同的rem,隻需要更改頁面根元素的font-size;

通過媒體查詢根據螢幕區間，更改html的font-size.把與元素尺寸有關的css,如width,height,line-height,margin,padding等都以rem作為機關,這樣頁面在不同裝置下就能保持一緻的網頁布局。;
1. 布局　　
通過js庫,動态更改html的font-size;(lib-dlexiable)；

常見問題：

retina螢幕需要高清圖檔，然而普通螢幕加載高清圖檔卻浪費資源耗帶寬，是以根據不同手機dpr加載不同的圖檔可以解決這問題。

@mixin img-dpr(){
    background-image: url(image.jpg);//預設
      [data-dpr="2"] & {
        background-image: url([email protected]);//兩倍高清
      }
      [data-dpr="3"] & {
        background-image: url([email protected]);//三倍高清
      }
}
.content{
    @include img-dpr(); 
}

字型會随着螢幕自由變化

@mixin font-dpr($font-size){
      font-size: $font-size;
      [data-dpr="2"] & {
        font-size: $font-size * 2;
      }
      [data-dpr="3"] & {
        font-size: $font-size * 3;
      }
}
.content{
    @include font-dpr(12px);    
}

border:1px 的做法（有好的做法，請推薦，謝謝）

@mixin border-dpr($side,$size,$color){
  border-#{$side}: $size solid $color;
  [data-dpr="2"] & {
    border-#{$side}: $size * 2 solid $color;
  }
  [data-dpr="3"] & {
    border-#{$side}: $size * 3 solid $color;
  }
}

雪碧圖錯位問題：a,先放大100倍，提高圖檔精度，找到圖檔位置，再縮小100倍;b,最好是使用字型圖示;c,單個背景

.icon-fix {
    background: none; position: relative; overflow: hidden; } .icon-fix:after { content: ''; display: block; width:

@function pxToRem($px, $base: 40) {
  @return ($px / $base) * 1rem;
}
#demo{with:pxToRem(30)}

flexible使用文檔說明：詳情文檔查考：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
1. <head>中添加對應的flexible_css.js和flexible.js檔案。一定是要在head中先引入。
2. 執行這個JS後，會在 <html> 元素上增加一個 data-dpr 屬性，以及一個 font-size 樣式。JS會根據不同的裝置添加不同的 data-dpr 值，比如說 2 或者 3 ，同時會給 html 加上對應的 font-size 的值，比如說 75px；
3. 在js中設定栅格數
  1. ```
  function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {//目前主流手機最大的css像素尺寸，是540（比如devicePixelRatio為2，分辨率是1080x1920的手機），是以用了這個經驗值。這樣可以讓在ipad橫屏這種情況下浏覽無線頁面，不至于因為拉伸适配後體驗太差。
          width = 540 * dpr;
      }        
      var rem = width / 16;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }      
```
4. 頁面中的元素，都可以通過 rem 機關來設定。他們會根據 html 元素的 font-size 值做相應的計算，進而實作螢幕的适配效果
5. 其中 initial-dpr 會把 dpr 強制設定為給定的值。如果手動設定了 dpr 之後，不管裝置是多少的 dpr ，都會強制認為其 dpr 是你設定的值。Android系列，始終認為其 dpr 為 1 。
6. 事實上他做了這幾樣事情：
  - 動态改寫 <meta> 标簽
  - 給 <html> 元素添加 data-dpr 屬性，并且動态改寫 data-dpr 的值
  - 給 <html> 元素添加 font-size 屬性，并且動态改寫 font-size 的值

：

1. 　部分小機型，頁面渲染meta沒有渲染出來。
2. dpr是3的時候scale是0.333333333不是1：1
3. 圖檔伺服器。高清屏看高清圖。

參考文檔：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

轉載于:https://www.cnblogs.com/StephenJiang/p/5852772.html

移動端高清、多屏适配方案——rem

繼續閱讀

C語言程式設計預報作業

Android ProguardAndroid Proguard

Android中Webview使用經驗總結

Android開發學習筆記：淺談WebView(轉)

轉 Android WebView應用詳解

Android WebView學習Android WebView學習

（轉）proguard 原理proguard 原理

第一個APP——GeoQuiz

參加微軟MDC大會

位元組面試官：2021年Android常見面試題，面試必備

Android 車載之車載投屏~

新聞 | Mapbox 牽手阿裡，飛豬旅行上線六大城市地圖功能

HBuilder開發App Step1——環境搭建，HelloMUI 以及真機調試

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

[轉]iOS微信小視訊優化心得

android 主線程的相關問題