zoukankan      html  css  js  c++  java
  • 淘宝、网易移动端布局方案

    //淘宝移动端布局
    //1、动态设置viewport的scale
    var scale = 1 / devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    //2、动态计算html的font-size
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
    //3、布局的时候,各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
    //4、font-size可能需要额外的媒介查询,并且font-size不使用rem,这一点跟网易是一样的

    //网易移动端布局
    /*(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';
    (4)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}
    }

    最后还有2个情况要说明:
    第一,如果采用网易这种做法,视口要如下设置:
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    第二,当deviceWidth大于设计稿的横向分辨率时,html的font-size始终等于横向分辨率/body元素宽:

    640*680

    641*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';*/

  • 相关阅读:
    spring + spring mvc + mybatis + react + reflux + webpack Web
    陈忠实和路遥:日他妈的文学和你懂个锤子
    Spring+SpringMVC+MyBatis+easyUI整合基础篇
    JAVA方法中的参数用final来修饰的效果
    全球晶圆代工厂哪家强?2016年Top30名单
    EXT combobox 二级连动 清空store缓存数据
    潘通
    MySQL性能优化
    启用了不安全的HTTP方法
    Hibernate一级缓存(基于查询分析)
  • 原文地址:https://www.cnblogs.com/xiaomingge/p/7373284.html
Copyright © 2011-2022 走看看