移动端适配方法

Posted 2020-08-17 奔跑的小七

做移动端项目发现最大的问题是适配问题，总结一下比较好用的适配方法：

首先：丢掉px吧，使用rem,浏览器的默认字体高都是16px因为100%=16px，1px=6.25%，所以10px=62.5%，

rem是只相对于根元素htm的font-size，即只需要设置根元素html的font-size，其它元素或者字体都使用rem为单位设置成相应的百分比即可；

例子：

1 html{font-size:62.5%;} 

2 body{font-size:1.2rem ;} (12px)

3 p{font-size:1.4rem;}（14px）

4 div{width:5rem}(50px)

其次在head标签里添加：

<meta content="width=device-width,initial-scale=0.5,maximum-scale=1,minimum-scale=0.1,user-scalable=0" name="viewport">

 

（具体值自己根据下面说明拟定）

1、width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度

2、height : 和width相对应，指定高度

3、initial-scale : 初始缩放比例，页面第一次加载时的缩放比例

4、maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0

5、minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0

6、user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放

然后用谷歌手机测试台测试完美适配！