移动端是怎么做适配的?

一、 meta viewport
在head标签内部加上这段代码


该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。

width=device-width: 让当前viewport宽度等于设备的宽度
user-scalable=no: 禁止用户缩放
initial-scale=1.0: 设置页面的初始缩放值为不缩放
maximum-scale=1.0: 允许用户的最大缩放值为1.0
minimum-scale=1.0: 允许用户的最小缩放值为1.0

二、 媒体查询(响应式)

格式一:

@media ()and(){}
//满足()里的条件,就执行大括号里css的样式

举例:


格式二并举例:


注意点:
1、link标签会下载好,但是是否生效取决于media的条件;
2、有PC端经验,就有移动端经验,只是多了一个media查询;
3、通过添加多个css样式来满足不同的屏幕宽度;

三、动态 rem 方案
1rem等于根元素html的font-size的值。

现在,根元素 html 的 font-size 的大小为 页面的宽度 pageWidth 。
也就是说: 现在 ,1 rem === html 的 font-size === pageWidth。

因此,就可以利用 rem 来动态的控制页面的大小。

你可能感兴趣的:(移动端是怎么做适配的?)