移动端几种适配方式
第一种:rem
<meta name="viewport" content="width=device-width, initial-scale=1.0,,maximum-scale=1,user-scalable=no">
设置窗口不能缩放
一般设备宽度的十分之一
如果这个值是动态计算的需要使用js去设置
根据设备的宽度计算html的font-size,获取html对象,并设置font-size
需要下载插件
px to rem & rpx & vw (cssrem)
配置
在文件本目录下创建.cssrem
第二种:媒体查询
@media screen and (max-width: 750px) {
/* 代码 */
}
第三种:vw/vh方案
vw
:是相对单位,1vw表示屏幕宽度的1%,需要缩放元素采用vw
,不需要采用px
具体实现方法与rem
类似,至于转换问题也可以参照rem
的插件方式