版权声明：商业转载需要经过本人同意，敬上！ https://blog.csdn.net/weixin_41835977/article/details/89154276
内容参考自：
https://imweb.io/topic/5a523cc0a192c3b460fce3a5
https://juejin.im/entry/5c580c02f265da2dc8493f8a
https://www.cnblogs.com/shenxiaolin/p/5388464.html
前言
我们知道网页很宽，而移动设备例如手机很窄，如果不进行屏幕适配，很容易导致网页错乱。
那么屏幕适配有哪些方法呢？
首先是大家通常会想到的meta标签。
一般方法，meta viewport + js
利用meta标签中viewport的通用属性来处理。
<meta name="viewport" content="width=device-width">
6属性+1新属性：
- width：设置layout viewport的宽度，正整数或字符串“device-width”
- initial-scale：设置页面的初始缩放值，数字或小数
- minimum-scale：允许用户的最小缩放值
- maximum-scale：允许用户的最大缩放值
- height：设置layout viewport的高度，一般不用
- user-scaleable：允许用户缩放，‘yes’或‘no’
- target-densitydpi：在安卓4.0以下的设备中不支持viewport的width，Android自带的浏览器设置target-density来达到目的；
target-densitydpi = UI-width/device-width*window.devicePixelRation*160
//UI-width: 布局宽度
//device-width:屏幕分辨率宽度 iphone4为640
//target-densitydpi=device-dpi 标示使用设备本身物理屏幕的像素,不会发生默认缩放
- miniual-ui：ios的Safari为meta新增属性，可以隐藏网页顶部地址栏和底部导航栏
以上可解决适配问题，但是移动端同样存在一个新操作，就是横竖屏。
通常使用js代码去解决横竖屏。
window.addEventListener("orientationchange",function () {
This.isOrietation = true;
This.changeOriention();
});
//建议执行横竖屏的事件都通过一个侦听完成，做一个统一的管理；在屏幕横竖屏切换完成之后再执行相应的事件
//定义横屏显示的样式
@media screen and(orientation:landspace){...}
//定义竖屏显示的样式
@media screen and(orientation:portrait){...}
//某个尺寸的特殊样式 竖屏时宽度为768px 符合一般ipad的条件
@media only screen and(orientation:portrait) and(device-width:768px){...}
一般方法，响应式布局
利用媒体查询，为主流分辨率的屏幕设计不同的布局CSS，进行切换。
这个方法工作量很大，复杂页面不好处理。
粗暴方法，rem
rem = font-size of the root element
em = font-size of the element
只要根据不同的屏幕设置好根元素的font-size，其他使用rem单位的元素就会自适应相应的尺寸了。
那如何设置根元素的font-size呢。
1.JS计算
通过js读取屏幕宽度，然后计算出相应的尺寸，并设置根元素的font-size。
const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";
2，媒体查询
@media screen and (min-width: 375px){
html {
font-size: 14.0625px;
}
}
@media screen and (min-width: 360px){
html {
font-size: 13.5px;
}
}
@media screen and (min-width: 320px){
html {
font-size: 12px;
}
}
html {
font-size: 16px;
}
3，利用px转rem的组件
fis3: fis3-postprocessor-px2rem
gulp stylus-px2rem
webpack px-to-rem-loader
//输入
.element {
@include rem('padding',10px 0 2px 5px);
}
//输出
.element {
padding: 10px 0 2px 5px;
padding: 1rem 0 0.2rem 0.5rem;
}
待更新。