前端针对不同屏幕尺寸自适应

一、核心思想

1.基本原则以使用flex布局为准，尺寸多使用rem，vw，vh为单位

2.如果是根据不同的屏幕需要有不同的布局，一般是通过检测屏幕尺寸换不同的站点或者媒体查询使用css：例如:百度

二、rem、vh、wh

1.rem

以html字体大小为1rem，html为16px，1rem则为16px。

rem之所以可以自适应是因为根据屏幕大小去用JS重新设置html的字体大小

算法：

html字体大小 = （js获取到的当前设备宽度/设计图宽度）*设计图宽度下的1rem大小

对应的自动转化库-postcss-pxtorem+js计算（需要npm安装）

npm install amfe-flexible --save
npm install install postcss-pxtorem --save-dev

//index.html
<script>
    let width = Math.min(document.body.clientWidth,750);
	let fontsize = (width/750)*100
    document.docunmentElement.style.fontSize = fontsize+'px'
	document.body.onresize = function(){
    let width = Math.min(document.body.clientWidth,750);
	let fontsize = (width/750)*100
    document.docunmentElement.style.fontSize = fontsize+'px'
	}
</script>

//配置信息
module.exports = {
    plugins: {
        "postcss-pxtorem": {
            // "rootValue": 37.5, // 设计稿宽度的1/10，代表 1rem=37.5px
            // 配置在将px转化为rem时 1rem等于多少px(因为我们搭配使用了amfe-flexible插件 此处我们需要设置的值应是UI设计稿全屏基准宽度的十分之一)
            // 当UI设计稿的全屏基准宽度是750px时 此处设置的值为75 但项目中使用了vant组件库 vant的设计稿总宽度是375px 其十分之一应是37.5(需要区分设置)
            rootValue ({ file }) {
              return file.indexOf('vant') !== -1 ? 37.5 : 75
            },
            "propList": ["*"], // 需要做转化处理的css属性  * 就是所有属性都要转换，如`hight`、`width`、`margin`等，`*`表示全部
            // 若想设置部分样式不转化 可以在配置项中写出
            // eg: 除 border和font-size外 所有px均转化为rem
            // propList: ["*", "!border","!font-size"], 
            "exclude": /node_modules/i, // 这里表示不处理node_modules文件下的css
            "selectorBlackList": ["ignore-"], // 忽略的选择器前缀
            "mediaQuery": false, // 是否在媒体查询中也转换 px
            "minPixelValue": 1, // 最小的 px 值才转换为 rem
            "replace": true, // 是否更换属性值，而不是添加一个rem的新属性
            "unitPrecision": 5 // 单位转换后的精度
        }
    }

2.vw，vh

假设屏幕宽高为750*1200，那么1vw就是7.5px 1vh就是12

使用vw做单位无需计算，因为vw会自动根据屏幕宽度变化

vh一般用来做全屏设计

对应的自动转化库-postcss-px-to-viewport（需要npm安装）

3.百分比

百分比是相对于父元素的百分比，所以一般除非是最外层的容器，否则不具备响应式调整的功能

三、三者区别

rem和vw两个方案都可以用于控制某个盒子的大小，会根据屏幕宽度灵活变化。

rem相对于vw灵活度较高，如果是移动端项目且需要web端浏览，rem可以做到的vw做不到。rem不去监听resize时间，或修改fontSize是做不到动态改变屏幕宽度时变化的大小的，如果你不想监听resize事件，或者你的变化没有触发resize事件，使用vw，如果只单纯的在移动端去看页面使用vw。

百分比是需要根据父组件去缩放就必须按照百分比，比如父元素是一个用js计算出来的尺寸盒子，我们希望里面的两个内容一个占30%，另一个占70%

四、注意事项

1.关于边距处理：靠左靠右使用flex，顶开部分小距离使用rem，vw

2.图片我们不定宽只定高，放置图片变形，但是如果屏幕跨度过大，可能会导致图片大到夸张，可以高丽设置图片的最大宽度然后居中，避免过长

3.数据可视化项目中，界面时必须是满屏，不能溢出也不能果断，但是有使用需要通过F11切换到全屏，会引起高度变化，这个rem和vh是不会变化，所以需要用到vh来做高度

五、拓展内容

1.设置视窗，通过辕信息配置meta

<meta name='viewport' conten = 'width=device-width,initaial-scale='>

2.媒体查询

body{
    font-size:16px
}
@media(min-width:780px)and(max-width:1024px){
    body{
        font-size:18px
    }
}

3.弹性布局

主轴方向：flex-direction

对齐方向：justify-content，align-items

弹性属性：flex