zoukankan      html  css  js  c++  java
  • 移动端适配方案总结(二)

    拉钩webapp

      1. 设置<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

      2. 设置 html { font-size: 65.5% ;}(10.48px =  16px*65.5% = 1rem )

      3 .顶部与底部的bar不管分辨率怎么变,它的高度和位置都不变, 每个列表的高度也不变

      4. 设置文本字体  例如 16px时  { font-size: 1.6rem;}

    淘宝webapp

     

    (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

      (5) https://github.com/amfe/lib-flexible 

    网易

    <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)在dom ready以后,通过以下代码设置html的font-size:

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

     (3) font-size需要额外的媒介查询

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

        var deviceWidth = document.documentElement.clientWidth;

        if(deviceWidth > 640) deviceWidth = 640;

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

     flex布局

      Flex布局教程:语法篇

  • 相关阅读:
    销售类
    语法
    编辑技巧 word
    assert
    游戏摘录
    游戏类链接 财富导图
    读书笔记之C# delegate
    c# socket传输struct类型
    关于wcf中一些重要词语解释
    asp.net CROSS-PAGE POSTING
  • 原文地址:https://www.cnblogs.com/xshaohua-com/p/8119181.html
Copyright © 2011-2022 走看看