1、响应式布局：px
- 概念：
响应式网页设计就是一个网站能够兼容多个终端-----而不是为每个终端做一个特定的版本；
其目的是为用户提供更加舒适的界面和更好的用户体验；
- 优缺点：
- 优点：
- 面对不同分辨率设备灵活性强；
- 能够快捷解决多设备显示适应问题；
- 缺点：
- 兼容各种设备工作量大，效率低下；
- 代码累赘，会出现隐藏无用代码，加载时间过长；
- 优点：
- 步骤：
- 设置meta标签（App.vue或者首html文件）
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true"> //user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。
- 通过媒体查询来设置样式media query（media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现）
@media screen and (max-width:980px){//设置不同设备中div的布局方式 #head { … } #content { … } #footer { … } }这里面的样式会覆盖掉之前所定义的样式。 - 设置多种视图宽度
/**ipad**/ @media only screen and (min-width:768px)and(max-width:1024px){ } /**iphone**/ @media only screen and (width:320px)and (width:768px){ } - 字体设置（一般rem更方便使用）https://www.cnblogs.com/YYvam1288/p/5123272.html
@media screen and (min-width: 768px) { html, body { font-size: 8px !important; } } @media screen and (min-width: 992px) { html, body { font-size: 10px !important; } } @media screen and (min-width: 1200px) { html, body { font-size: 14px !important; } } @media screen and (min-width: 1500px) { html, body { font-size: 16px !important; } }
- 设置meta标签（App.vue或者首html文件）
- 响应式布局所涉及到的问题：
- 图片液态化：
img{//要保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）,不可以使用width:100%,会让图片跟他的容器一样宽 max-width:100%; height:auto; }
- 图片液态化：
2、弹性布局（百分比布局、流式布局）
百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。
如果用百分比写width，那么指的是父元素width的百分之多少。
如果用百分比写height，那么指的是父元素height的百分之多少。
如果用百分比写padding，那么指的是父元素width的百分之（无视padding）多少，无论是水平的padding还是竖直的padding。
如果用百分比写margin，那么指的是父元素width的百分之（无视padding）多少，无论是水平的margin还是竖直的margin。
不能用百分比写border的宽度
3、rem布局
- 概念：rem是相对于根元素（html）的字体大小的单位；
em一般都是以<body>的“font-size”为基准（表示父元素的字号的倍数）；
比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”；
body{
font-size:10px;
}
p{
font-size:1.4em;//14px
}
4、参考资料：
https://www.cnblogs.com/fengyingwang/p/6073795.html
