zoukankan      html  css  js  c++  java
  • html5移动端主流适配方案

    1、流式布局(百分比布局)    案例:京东移动端

    优点:简单方便,只需要固定高度,宽度自适应;

    缺点:大屏幕手机实际显示的不协调。

    2、响应式布局

    优点:可以节约成本,不用再做专门的web app网站(外包公司、小公司、博客);

    缺点:工作量大、维护很难;国内大型企业在移动端很少用。

    3、固定宽度     案例:荔枝FM   640px

    优点:与设备做等比例的缩放;

    缺点:在大屏幕手机下两边留白,操作按钮小。

    4、目前主流做法rem    案例:淘宝移动端

    rem:font size of root element 相对于根目录字体的大小;

    优点:能等比例的适配所有的屏幕,rem是根据html的font-size大小来变化的,基于这个出发,我们可以在任何一个设备下根据设备的宽度来设置html字号,从而实现自适应布局。

    两种方案:

      (1)rem随设备宽度做自适应,scale值固定为1;

      (2)rem随设备宽度做自适应,viewport进行缩放,scale值不固定。

    5、未来趋势

    vw/vh  相对于viewport理想的视窗(设备)的比例;(目前兼容性较差)

    1vw=1%*设备宽度。

     

    注:移动端基于标签meta

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    附:javascript获取设备宽度并设置根目录下字体大小的一种方法

    !function(win){

      var oHtml=win.document.documentElement; //获取html

      var timer=null;

       function changeRem(){

             var width=oHtml.getBoundingClientRect().width; //获取设备的宽度,IE浏览器要做兼容处理

        if(width>540){

          width=540;

        }

        var rem=width/10;

        oHtml.style.fontSize=rem+"px"; //设置根目录下字体大小

      }

      win.addEventListener("rasize",function(){

        clearTimeout(timer);

        timer=setTimeout(changeRem,300);

      })

      changeRem();

     }(window);

  • 相关阅读:
    Anltr 规格严格
    非结构文本分析 规格严格
    获取32R的图像的直方图的一个算法
    NetBeans 6.5 开发计划
    Java中国象棋博弈程序探秘[6]——游戏与界面
    NetBeans 时事通讯(刊号 # 14 Jul 01, 2008 )
    Download NetBeans IDE 6.5 Milestone 1!
    Java中国象棋博弈程序探秘[5]——搜索算法
    100本顶尖软件开发书籍
    Java中国象棋博弈程序探秘[4]——生成有效着法
  • 原文地址:https://www.cnblogs.com/ifworld/p/7616764.html
Copyright © 2011-2022 走看看