移动web开发rem+js适配布局开发

视口

视口(viewport) 就是浏览器显示页面内容的屏幕区域,视口分为 布局视口 视觉视口和理想视口

布局视口:layout viewport

一般设备的浏览器设置了一个布局视口,用于解决早期pc端页面在手机上显示的问题

rem基础

rem (root em) 是一个相对单位,类似于em是父元素字体大小,不同的是,rem的基准是相对于html元素字体大小

rem的优点:可以通过修改html里面的文字大小来改变页面元素中的大小可以整体控制

rem+js

• 用过js动态获取屏幕宽度修改html根字体大小
• 假设:设计稿为750px  根字体大小为100,那么1rem=100px ,盒子宽为16px那么就是0.16rem
• 在375屏幕下 html.fontsize值为 375/750*100=50,根字体大小为50px 那么1rem=50px,那么宽度为0.16rem的盒子在 375的屏幕下为8px

window.onload = function () {
    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    getRem(720, 100)
};
window.onresize = function () {
    getRem(720, 100)
};
function getRem(pwidth, prem) {
    //html元素
    var html = document.getElementsByTagName("html")[0];
    //当前屏幕宽度
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    //根字体大小=当前屏幕宽度/设计稿宽度*换算比例 
    html.style.fontSize = oWidth / pwidth * prem + "px";
    // 1rem    x     750  375     1rem  0.16rem
    // 100px 16px    100   x      50px  x

}