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