分享两个常用的rem布局方式
关于rem
这种技术需要一个参考点,一般都是以<body>的“font-size”为基准。
比如我们设置body,html的字体大小为10px;那么1rem就是10px,
这样一来,我们设置字体大小相当于“14px”时,只需要将其值设置为“1.4em”。
1.手机淘宝一直用的方法:思路是通过js动态的获取 设备的DPR(设备像素比),根据dpr来改变标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
中的属性值;
代码如下
var dpr, rem, scale; var docEl = document.documentElement; var fontEl = document.createElement('style'); var metaEl = document.querySelector('meta[name="viewport"]'); dpr = window.devicePixelRatio || 1; rem = docEl.clientWidth * dpr / 10; scale = 1 / dpr; // 设置viewport,进行缩放,达到高清效果 metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); // 设置data-dpr属性,留作的css hack之用 docEl.setAttribute('data-dpr', dpr); // 动态写入样式 docEl.firstElementChild.appendChild(fontEl); fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; window.dpr = dpr; window.rem = rem;
此时 在dpr=2时1rem=75px;
所以如果我们要设置div的宽度为750px;(注:750px,为设计稿中div的宽度)就要写为:width:750/75*1rem;
最后因为dpr为2,页面scale了0.5,所以在手机屏幕上显示的真实宽高应该是375
px,就刚刚好。
如果设置的值不是好算的数字,比如123px,那就很蛋疼了
为了减少计算,在less中可以定义以下函数
.change_val(@name, @px){ @{name}: @px / 75 * 1rem; }
这样在less中就可以写为
.container{
.change_val (width,123); //123是设计稿原值
.unchanged_val(font-size,100)
}
另:在设计中我们一般希望font-size一直固定不变对此:
.unchanged_val(@name, @px){ @{name}: round(@px / 2) * 1px; [data-dpr="2"] & { @{name}: @px * 1px; } // for mx3 [data-dpr="2.5"] & { @{name}: round(@px * 2.5 / 2) * 1px; } // for 小米note [data-dpr="2.75"] & { @{name}: round(@px * 2.75 / 2) * 1px; } [data-dpr="3"] & { @{name}: round(@px /*3 / 2) * 1px } [data-dpr="3.5"] & { @{name}: round(@px * 3.5 / 2) * 1px; } // for 三星note4 [data-dpr="4"] & { @{name}: @px * 2px; } }
2.我们可以以iphone6(375*667)设计稿为原型:
设置css
html { font-size: calc(100vw/3.75); }
这个意思就是设置 html的font-size为100px;
因为这样写比较方便,比如在写一个div宽度为75px时,直接定义width:0.75rem;就可以了
为了避免calc()的兼容性问题,可以加上如下js;
document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px';