移动端适配

标签：浏览器   百分比   配方法   动态   设计图   

总结下自己用过的几种移动端适配方法

1. 百分比适配

   宽度高度按照所占百分比计算 写css

   缺点:复杂些的布局就满足不了 不能百分百还原设计图

2. Rem布局 js动态计算html font-size值

   宽度高度按照320px的设计图切图 rem与之对应的关系是 1rem=20px

    用js根据视图宽度计算 html的font-size值

function resetRem(){
      var rect = window.document.documentElement.getBoundingClientRect();
                         //window.devicePixelRatio;
       var width = rect.width > 540 ? 540 : rect.width;

       var rootEm = parseFloat(width/320 * 20);
                         //alert(rect.width + " / " + rootEm);
           $("html").css("font-size", rootEm + "px");
                 }

 $(window).bind("resize", function(){
         window.setTimeout(resetRem, 300);
   });

 resetRem();

3. vw布局 

   与rem布局类似 不过单位换成vw 1vw=1% 视图宽度

   浏览器会自动根据视图大小变换 不用js

本文出自 “SS2TT” 博客，谢绝转载！

移动端适配

标签：浏览器   百分比   配方法   动态   设计图   

原文地址：http://ss2tt.blog.51cto.com/1748942/1680716