背景:

  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系列,始终认为其dpr1
    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

最新文章

  1. 鼠标光标聚焦到可编辑div的最末尾
  2. 返回值优化(RVO)
  3. bdb mvcc: buffer 何时可以被 看到; mvcc trans何时被移除
  4. MyBatis学习总结(六)——调用存储过程
  5. CSS行高——line-height
  6. SpringMvc 单例
  7. Linux下生成动态链接库是否必须使用 -fPIC 的问题[转]
  8. Classical Inheritance in JavaScript
  9. vuejs模板使用方法
  10. Java微信公众平台开发之获取地理位置
  11. fedora 19 gnome 3.8 关闭笔记本盖子的动作
  12. 两天快速开发一个自己的微信小程序
  13. Python CRM项目三
  14. requests-模拟登陆
  15. [国家集训队]排队 [cdq分治]
  16. selenium自动加载各个浏览器插件
  17. 第一行代码 3-2-2 软件也要拼脸蛋-UI界面-更强大的滚动条- 卡片
  18. 转:异常处理之ThreadException、unhandledException及多线程异常处理
  19. SaltStack 安装及配置认证
  20. HBase集群的搭建

热门文章

  1. JTable 的使用
  2. Form开发:字段关系-消息-快速编码-参数和系统变量
  3. 使用python制作ArcGIS插件(4)界面交互
  4. 阿里云oss总是提示SignatureDoesNotMatch错误怎么办
  5. sql增删查改
  6. 在Ubuntu12.0至14.04版本之间用Apache搭建网站运行环境
  7. 浅谈 MVC中的ViewData、ViewBag和TempData
  8. 如何让 Git 忽略掉文件中的特定行内容?
  9. TCP报文段的首部格式
  10. Android中使用开源框架EventBus3.0实现Fragment之间的通信交互