移动端高清、多屏适配方案——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 主线程的相关问题