1.JS的根据不同屏幕宽度动态设置html的font-size,使用rem布局。

   a.手淘方案 flexible+rem(参考https://github.com/amfe/article/issues/17)

  引入flexible.js,不需要在html结构中加入viewport标签。

      flexible.js会在<html>元素上增加一个data-dpr属性,以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值,比如说2或者3;同时会给html加上对应的font-size的值,比如说75px;以及会添加viewport标签,JS会根据不同的设备添加不同的缩放比(建议内联处理,在所有资源加载之前执行这个JS)

  例如:设计稿是750px宽度,将750px进行10等分,则1rem=75px,

     如果设计稿中量出某块区域的margin-top值20px,对应换算成rem为20/75=0.266667rem。

       css代码就是margin-top:0.266667rem。

    b.不引入第三方库,自写js动态设置html的font-size+rem

        (function (doc, win) {

        var docEl = doc.documentElement,//根元素html

        //判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

        var clientWidth = docEl.clientWidth;

        if (!clientWidth) return;

        //把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效果。
       docEl.style.fontSize = 16* (clientWidth / 375) + 'px'; }; //alert(docEl) if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数:第一个是事件名称比如点击事件onclick,第二个是要执行的函数,第三个是布尔值 doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间 })(document, window);

  js会根据不同设备的宽度设置html的font-size,html结构需要加入

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

  屏幕根据设计稿的比例转换对应的rem值,比如:

  750的设置 = 16*(clientWidth/375) 

  640的设置 = 20*(clientWidth/320) 

  320的设置 = 10*(clientWidth/320) 

  例如:设计稿是750px宽度(基于iphone6 375*2=750 得到的设计稿),如果设计稿中量出某块区域的margin-top值20px,

     在实际iphone6设备375px宽度中,应该除以2,所以得到值mragin-top是20/2=10px,

     因为1rem=16px(16*(iphone6设备宽度/375)+'px'),所以对应换算成rem为10/16=0.625rem。

     css代码中就是margin-top:0.625rem。

  

2.flex布局,不使用rem,直接使用px。

  html结构需要加入<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

  例如:设计稿是750px宽度,设计稿是750px宽度(基于iphone6 375*2=750 得到的设计稿),

     如果设计稿中量出某块区域的margin-top值20px,

     在实际iphone6设备375px宽度中,应该除以2,所以得到值mragin-top是20/2=10px。

     css代码中就是margin-top:10px。

 

转载于:https://www.cnblogs.com/lwucoder/p/6964090.html

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐