背景：

  1. 开发移动端H5页面
  2. 一套设计图
  3. 不同尺寸的手机
  4. 不同分辨率的手机

方案：使用rem作为单位解决一套设计图适应不同分辨率，不同尺寸的手机。

概念：

  1. REM(font size of the root element). 相对于<html>的font-size的计算方式。
  2. dpr(device pixel ratio).设备像素比；i5,6 = 2;i6plus=3;
  3. <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
  4. 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;

  1. 通过媒体查询根据屏幕区间，更改html的font-size.把与元素尺寸有关的css,如width,height,line-height,margin,padding等都以rem作为单位,这样页面在不同设备下就能保持一致的网页布局。;
    1. 布局　　

      @media screen and (max-width: 320px) {
      
   html{font-size: 14px;}
      
}
      
@media screen and (min-width: 321px) and (max-width: 413px) {
      
    html{font-size: 16px;}
      
}
      
@media screen and (min-width: 414px) and (max-width: 639px) {
      
    html{font-size: 17px;}
      
}
      
@media screen and (min-width: 640px) {
      
    html{font-size: 18px;}
      
}
  2. 通过js库,动态更改html的font-size;(lib-dlexiable)；

常见问题：

  1. retina屏幕需要高清图片，然而普通屏幕加载高清图片却浪费资源耗带宽，因此根据不同手机dpr加载不同的图片可以解决这问题。

    @mixin img-dpr(){
    
    background-image: url(image.jpg);//默认
    
      [data-dpr="2"] & {
    
        background-image: url(image@2x.jpg);//两倍高清
    
      }
    
      [data-dpr="3"] & {
    
        background-image: url(image@3x.jpg);//三倍高清
    
      }
    
}
    
.content{
    
    @include img-dpr();
    
}
  2. 字体会随着屏幕自由变化 
    @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);
    
}
  3. 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;
      }
    }
  4. 雪碧图错位问题：a,先放大100倍，提高图片精度，找到图片位置，再缩小100倍;b,最好是使用字体图标;c,单个背景 
    .icon-fix {
    
    background: none;
    
    position: relative;
    
    overflow: hidden;
    
}

.icon-fix:after {
    
    content: '';
    
    display: block;
    
    width: 10000%;
    
    height: 10000%;
    
    position: absolute;
    
    left: 0;
    
    top: 0;
    
    background-image: url(sprite.png);
    
    background-repeat: no-repeat;
    
    background-size: 140rem;
    
    -webkit-transform-origin: 0 0;
    
    -webkit-transform: scale(.01);
    
    transform-origin: 0 0;
    
    transform: scale(.01);
    
}

.icon3:after {
    
    background-position: 0 -280rem;
    
}
  5. 设计稿px转成rem:640的设计稿$base:40;750的设计稿$base:75. 
    @function pxToRem($px, $base: 40) {
      @return ($px / $base) * 1rem;
    }
    #demo{with:pxToRem(30)}
  6. 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. 字体需不需设置成px？()
  2. 原先设计图是640的，新设计图是750的。如何兼容之前的版本？
  3. 能不能在refeshRem中的540适当的放大，从而支持pad样式？
  4. rem兼容哪些坑？
    1. 　部分小机型，页面渲染meta没有渲染出来。
    2. dpr是3的时候scale是0.333333333不是1：1
    3. 图片服务器。高清屏看高清图。

H5适配终端数据

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

移动端高清、多屏适配方案——rem的更多相关文章

  1. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  2. 解惑好文：移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  3. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  4. 解惑好文：移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  5. CS5265 新出TYPEC转HDMI 4K60 高清投屏转接方案|可替代RTD2172

    CS5265是一种高度集成的单芯片,主要用于设计typec转HDMI转接线或者typeC转HDMI转换器,应用在各种手机或者电脑显示端设备当中.用CS5265设计的TYPEC转HDMI 4K高清投屏线 ...

  6. webapp：移动端高清、多屏适配方案（zz）

    来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...

  7. 移动端高清、多屏适配方案 [来源：http://div.io/topic/1092]

    Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...

  8. CS5265替代LT8711设计TYPEC转HDMI 4K高清投屏方案|LT8711龙迅替代方案

    龙迅LT8711是一款Type-C/DP1.2 to HDMI2.0方案芯片.LT8711HE是一款高性能Type-C/DP1.2至HDMI2.0转换器,设计用于将USB typec或DP1.2源连接 ...

  9. Android高清巨图加载方案

    1.今天看了鸿洋的<Android高清巨图加载方案>一文,对加载高清巨图时的解决方案有了一定的认识. 思路为: 提供一个设置图片的入口. 重写onTouchEvent,在里面根据用户移动的 ...

随机推荐

  1. C#进阶系列——使用Advanced Installer制作IIS安装包（一：配置IIS和Web.config）

    前言:大过年的,写篇文章不容易,还是给自己点个赞~~年前找了下.net安装包的制作方法,发现Visual Studio自带的制作工具使用起来非常麻烦,需要单独下载安装包,并且什么激活认证等等屁事相当麻 ...

  2. 深入理解DOM事件类型系列第六篇——加载事件

    前面的话 提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.java ...

  3. 数据库SQL,NoSQL之小感悟

    遇到1000万数据表 最近遇到一个问题,就是单表数据过的存储及查询问题.举个例子:1000万的数据存在一个表中,字段4-5个样子,日常 开发中难免要做过滤.排序.分页.如果把这几个放在一起即要过滤又要 ...

  4. Linux编程之ICMP洪水攻击

    我的上一篇文章<Linux编程之PING的实现>里使用ICMP协议实现了PING的程序,ICMP除了实现这么一个PING程序,还有哪些不为人知或者好玩的用途?这里我将介绍ICMP另一个很有 ...

  5. IIS7.0发布后关于"不能在此路径中使用此配置节”的解决办法

    在系统为window sever2008,iis7.0上安装后发布出现 IIS Web Core 通知 BeginRequest 处理程序 尚未确定 错误代码 0x80070021 配置错误 不能在此 ...

  6. php单例模式与工厂模式

    单例模式:单例模式又称为职责模式,它用来在程序中创建一个单一功能的访问点,通俗地说就是实例化出来的对象是唯一的. 所有的单例模式至少拥有以下三种公共元素:1. 它们必须拥有一个构造函数,并且必须被标记 ...

  7. c#生成动态库并加载

    下面这段代码生成dll文件,不能编译运行.点击项目右键,点击生成,这时会在debuge文件中生成相应的配置文件. using System; using System.Collections.Gene ...

  8. C/C++面试之算法系列－－去除数组中的重复数字

    去除数组中的重复数字 Sailor_forever  sailing_9806@163.com 转载请注明 http://blog.csdn.net/sailor_8318/archive/2008/ ...

  9. 复制vmware中的centos后无法上网问题

    复制vmware中的centos后无法上网问题 查看IP命令 ip addr 网卡信息 eth1: mtu 1500 qdisc pfifo_fast state UP qlen 1000 使用的是e ...

  10. 淘宝API调用 申请 获取session key

    在调用淘宝的API时,我们都会用到appkey,appsecret,appsession. 1.我们申请应用就会有appkey和appsecret了 2.正式环境下获取SessionKey 注意:we ...