这次是对产生效果进行手机移动端的配置
首先是技术胖的科普时间，铛铛铛...
常见移动web布局适配方法
- 固定高度，宽度百分比：这种方法只适合简单要求不高的webApp，几乎达不到大型项目的要求，属于过时的方法。
- Media Query（媒体查询）：现在比较主流的适配方案，比如我们常用的样式框架Bootstrap就是靠这个起家的，它能完成大部分项目需求，但是编写过于复杂。
- flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，这也是现在工作中用的最多的布局方式，那我们的项目尽量采用flex+rem的方式进行布局和完成移动端的适配
rem单位介绍
rem（font size of the root element）是相对长度单位。相对于根元素（即html元素）font-size计算值的倍数。
然后就是代码时间啦哈哈
先找到根目录下的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>smiledemo</title>
<!-- iphone5 1rem=16px html font-size=16px -->
<style>
.test{
width: 20rem;
height: 10rem;
background-color: bisque;
text-align: center;
}
.hello{
color:red;
font-size: 1rem;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<div class="test">
<p class="hello">
Hello Jsamyn
</p>
</div>
<script>
//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/20 + 'px';
console.log(htmlwidth);
</script>
</body>
</html>
运行效果如下：
