meta rem

4 meta

我们可以通过meta标签，对viewport进行控制，一般我们的设置之后想要的效果：

1）viewport的宽度==屏幕的宽度

2）同时不允许用户手动缩放。

一般情况下，设置viewport的代码放到模板里面去

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

属性名称

作用

width

设置viewport的宽度，一般直接写device-width

initial-scale

初始缩放比例，也即是当页面第一次 load 的时候缩放比例

maximum-scale

允许用户缩放到的最大比例

minimum-scale

允许用户缩放到的最小比例。

user-scalable

用户是否可以手动缩放。

height

一般不设置（忽略）

 

5 rem

Rem是什么？（root element）

1）是一个相对于根元素的单位

2）和em相类似，只是em相对于父元素

Rem的特点：

默认情况下1rem= 16px 当然，这是和浏览器默认字体相关（坑：Chrome最小字体是12px）

1）通过JS去设置HTML的font-size

（3.1）现货区屏幕的宽度

（3.2）计算出1rem的值，1rem=屏幕宽度/16；16不是固定的.15也行，建议用16

（3.3）设置到HTML元素上去

2）测试效果图得到的是XXpx,我们需要转换成rem

(4.1)代码里面写具体的px，然后我们将代码传到指定网站，在线转换成rem

http://www.520ued.com/tools/rem