index.html头部添加meta语句
<meta name="yiewport"content="width-device-width,
initial-scale=l.0, maximum-scale=l.0, user-scalable-no"/>
将上述语句加在模板文件index.html中，如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
...
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>...</title>
</head>
<body>
<div id="root"></div>
...
</body>
</html>
meta各参数说明： width = device-width: 宽度等于当前设备的宽度
initial-scale: 初始的缩放比例 (默认设置为1.0)允许用户缩放到的最小比例(默认设置为1.0)
minimum-scale:maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)
css样式根据不同的设备添加不同的样式:
字体大小做统一调整: 设备的默认大小都是16px; 设置为62.5%就是10px; 1rem就是10px,calc(40vh)是页面大小的40%高度(vw是宽,vh是高)
body{
font-size: 62.5%
}
/* pc 宽度大于1200px */
@media screen and (min-width: 1200px){
.header {
min-height: 20rem;
margin: calc(37vh) auto;
}
}
/* 平板 小于1199 大于501px*/
@media screen and (max-width: 1199px) and (min-width: 501px) {
.header {
min-height: 20rem;
margin: calc(37vh) auto;
}
}
/* 手机 最大500px*/
@media screen and (max-width: 500px) {
.header {
height: 20rem;
}
}
后记
现在有不少的框架也有自适应布局组件，但是我们要是了解原生的方法，未来在用组件时碰到问题会方便很多。
