一、设置meta标签
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
上述meta标签的每一个属性的详细介绍如下:
属性名 | 取值 | 描述 |
---|---|---|
width | 正整数 | 定义布局视口的宽度,单位为像素 |
height | 正整数 | 定义布局视口的高度,单位为像素,很少使用 |
initial-scale | [0,10] | 初始缩放比例,1表示不缩放 |
minimum-scale | [0,10] | 最小缩放比例 |
maximum-scale | [0,10] | 最大缩放比例 |
user-scalable | yes/no | 是否允许手动缩放页面,默认值为yes |
二、设置rem单位
rem是一个灵活的、可扩展的单位,由浏览器转化像素并显示。与em单位不同,rem单位无论嵌套层级如何,都只相对于浏览器的根元素(HTML元素)的font-size。
默认情况下,html元素的font-size为16px,所以:
1rem = 16px
为了计算方便,通常可以将html的font-size设置成:
html{ font-size: 62.5%; }
这种情况下:
1rem = 10px
// 设置响应式字体大小为26px
<div style="font-size: 2.6rem;">你好</div>
三、通过rem来实现响应式布局
rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面的size发生变化时,只需要改变font-size的值,那么以rem为固定单位的元素的大小也会发生响应的变化。
因此,如果通过rem来实现响应式的布局,只需要根据视图容器的大小,动态的改变font-size即可。
(function(doc, win) {
const docEl= doc.documentElement
refreshRem = function() {
let deviceWidth = docEl.clientWidth
// dw为设计稿宽度
const dw = 640
// 当前屏幕大于设计稿宽度
if (deviceWidth > dw) {
deviceWidth = dw
}
const rem = deviceWidth / dw * 10
docEl.style.fontSize = rem + 'px'
}
// 初始化
refreshRem()
// 监听屏幕大小变化
win.addEventListener('resize', refreshRem, false)
})(document, window)