Js常见题目2

移动端是怎么做适配的？

1.使用<mtea name="viewport">

<meta>标签包含 name、 content 、 http-equiv 、 charset 、 scheme 五个属性，当 name 的值为 viewport 时可以使页面适应移动端设备，常用的meta viewport标签如下： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

其中：

width：控制viewport宽度的大小，可以指定的一个值（或特殊值），如500，或device-width //特殊值

height：控制viewport宽度的大小，同上

initial-scale：控制页面第一次加载时的缩放比例

maximum-scale：允许用户缩放的最大比例

minimum-scale：允许用户缩放的最小比例

user-scalable：用户是否可以手动缩放

2.媒体查询

@media有四种媒体类型： all （适用于所有设备）、 screen （用于屏幕）、 print（用于打印设备）、speech （用于发声设备），默认情况下使用 all 类型

Js常见题目2

上图使用all类型.当窗口小于500px时，字体变成红色.

3.使用动态 rem

rem代表根元素的 font-size 的大小，当设置元素的 font-size 为1rem时，就表示该元素的字体大小为根元素字体大小的1倍，2rem就为根元素字体大小的2倍...以此类推；同时也可以通过修改根元素的字体大小来改变元素字体的大小。

使用rem可以成比例地修改元素的字体大小，还可以避免添加的字体样式与继承来的样式相冲突。