移动端布局
2019-06-23 本文已影响0人
崔某猿
rem布局
rem布局简单来说就是根据页面的font-size的大小来设置页面元素的属性;
1.计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem;
2.举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem
js代码:
function resetWidth() {
// 兼容ie浏览器 document.body.clientWidth
var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(baseWidth);
// 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
加上下面代码防止影响默认字体大小
document.body.style.fontSize = '15px';
使用flexible布局
github地址:https://github.com/amfe/lib-flexible
官方文档地址:https://github.com/amfe/article/issues/17
本文中有部分内容引至上面这个文档。
cdn地址
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"
></script>
如果你用的是其他编辑器或者IDE,就可以用CSS的处理器来处理,比如说Sass、LESS以及PostCSS这样的处理器。
@function px2rem($px) {
@return $px / 75 * 1rem;
}
字体不使用rem的方法
@mixin font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}