移动的meta标签 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
常见移动web适配方法:
1.定高,百分比布局
2.flex布局
3.media媒体查询
rem(font size of the root element)原理与简介:
1.字体单位:它的值根据html根元素大小来定,同时可以作为宽度高度等单位。
2.适配原理: 将px改为rem,动态修改html的font-size大小。
3.兼容性: ios6以上和 android2.1以上 ,基本覆盖所有流行手机系统。
动态修改html 的font-size:
1.使用媒体查询的方式:
/*大于320px小于360px宽度的时候*/
media screen and (max- 360px) and (min-321px){
html{
font-size: 20px;
}
}
/*小于320px宽度的时候*/
media screen and (max- 320px){
html{
font-size: 24px;
}
}
缺点:需要适配很多机型的宽度,而且范围要清楚:min-width- xx max-width xx,
2.使用js动态修改html font-size
//获取html宽度
let htmlWidth = document.documentElment.clientWidth || document.body.clientWidth; //兼容性写法
//获取html元素
let htmlDom = document.getElementsByTagName("html")[0];
//设置html font-size
htmlDom.style.fontSize = htmlWidth / 10 +"px"; //动态计算html font-size的值
使用scss进行rem自动转化(使用npm 安装 node-sass)
@function px2rem($px){
$rem : 37.5px; /*定义基准值*/
@return ($px / $rem) + rem;
}
.test{
width: px2rem(100px);
height: px2rem(100px);
}
/*编译之后的值*/
.test{
width: 2.66667rem;
height: 2.66667rem;
}