zoukankan      html  css  js  c++  java
  • 前端适配之细说rem(网易的移动端页面布局做法)

      rem指的是根元素的字体大小,多数根元素大小为16px,但设备的dpi会影响根元素的大小,因此并不是固定的。

      所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写。

      使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦,那应该如何解决呢?我们可以通过JS来计算不同分辨率下,font-size的大小,这是在我研究了网易的移动端布局之后得出的结论。

      下图是网易在分辨率为320*680,375*680,414*680,500*680时,html的font-size尺寸

      

      

      它是根据什么计算的,这就跟设计稿有关了,拿网易来说,它的设计稿应该是基于iphone4或者iphone5来的,所以它的设计稿竖直放时的横向分辨率为640px,为了计算方便,取一个100px的font-size为参照,那么body元素的宽度就可以设置为 6.4rem,于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。根据这个计算规则,可得出本部分开始的四张截图中html的font-size大小如下:

    deviceWidth = 320,font-size = 320 / 6.4 = 50px
    deviceWidth = 375,font-size = 375 / 6.4 = 58.59375px
    deviceWidth = 414,font-size = 414 / 6.4 = 64.6875px
    deviceWidth = 500,font-size = 500 / 6.4 = 78.125px

      这个6.4怎么来的,当然是根据设计稿的横向分辨率/100得来的。

      这个deviceWidth通过document.documentElement.clientWidth就能取到了,所以当页面的dom ready后,做的第一件事情就是:

      document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

     
      下面总结网易的这种做法:
      第一步移动端视口的设置:<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
      第二步:
      (1)先拿设计稿竖着的横向分辨率除以100得到body元素的宽度:
    如果设计稿基于iphone6,横向分辨率为750,body的width为750 / 100 = 7.5rem
    如果设计稿基于iphone4/5,横向分辨率为640,body的width为640 / 100 = 6.4rem
      (2)布局时,设计图标注的尺寸除以100得到css中的尺寸,比如下图:
      

      

      播放器高度为210px,写样式的时候css应该这么写:height: 2.1rem。之所以取一个100作为参照,就是为了这里计算rem的方便!

      

      (3)在dom ready以后,通过以下代码设置html的font-size:

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

      6.4只是举个例子,如果是750的设计稿,应该除以7.5。

      font-size可能需要额外的媒介查询,并且font-size不能使用rem,如网易的设置:

     @media screen and (max-321px){

        .m-navlist{font-size:15px}
    }
    
    @media screen and (min-321px) and (max-400px){
        .m-navlist{font-size:16px}
    }
    
    @media screen and (min-400px){
        .m-navlist{font-size:18px}
    }

      

      另外,当deviceWidth大于设计稿的横向分辨率时,html的font-size始终等于横向分辨率/body元素宽:

    image640*680

    image641*680

    之所以这么干,是因为当deviceWidth大于640时,则物理分辨率大于1280(这就看设备的devicePixelRatio这个值了),应该去访问pc网站了。事实就是这样,你从手机访问网易,看到的是触屏版的页面,如果从pad访问,看到的就是电脑版的页面。

    var deviceWidth = document.documentElement.clientWidth;
    if(deviceWidth > 640) deviceWidth = 640;
    document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';//这里也可以改成跳转PC端网站
    最后打个广告,本人创建了一个前端技术qq群399627992,有兴趣的可以加一下,一起学习一起进步
     
  • 相关阅读:
    使用FolderBrowserDialog组件选择文件夹
    使用OpenFileDialog组件打开多个文
    使用OpenFileDialog组件打开对话框
    获取弹出对话框的相关返回值
    PAT 甲级 1139 First Contact (30 分)
    PAT 甲级 1139 First Contact (30 分)
    PAT 甲级 1138 Postorder Traversal (25 分)
    PAT 甲级 1138 Postorder Traversal (25 分)
    PAT 甲级 1137 Final Grading (25 分)
    PAT 甲级 1137 Final Grading (25 分)
  • 原文地址:https://www.cnblogs.com/JinQingsong/p/6686886.html
Copyright © 2011-2022 走看看