移动端

Posted 2020-08-10

移动端:

1、要设置适应各种手机屏幕大小尺寸：
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px;} }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }

2、要添加meta标签：
意思是：页面窗口自动调整到设备宽度，并禁止用户及缩放页面。代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />

属性基本含义：
content=”width=device-width：
控制 viewport 的大小,device-width 为设备的宽度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放

3、移动端的字体都要用rem，与你自己设置的根元素字体大小换算得来。

4、所有的宽度都要用%（百分比），高度最好也用%（百分比），如果实在不好换算也可以用rem。

5、所有的img都要用div包住，且宽度是100%。父集div的宽度是总页面宽度的百分比。