配置响应式布局
什么是响应式？
使用相同的 HTML 代码在不同的显示设备上呈现依据设备大小、分辨率及其它众多因素所重新排版的 web 页面。
当页面在设备中缩放时，它会重新排版，以便符合当前的分辨率，并提供最佳用户体验。
如何配置响应式？
通常我们使用 rem 和 vw vh 配合 媒体查询 进行响应式布局
rem：相对单位，html标签的字体大小决定了它的大小
html {
font-size: 50px; /* 设置html标签的大小为50px */
}
/* 则 1rem 的大小为 50px */
div {
width: 1rem; /* 实际为50px */
height：2rem; /* 实际为100px */
}
vw：相对单位，它是根据视口的大小来决定的，100vw = 视口的宽度，也就是说视口会被等分为100份，1vw就是视口1%的宽度
div {
width: 50vw; /* 宽度为视口的一半，会跟随视口的宽度进行变化 */
}
视口：视口宽度并非设备的宽度，视口宽度是当前显示区可见的宽度， 网页内容的大小和位置不依赖于设备的分辨率，因此可以很容易地在所有分辨率和设备上显示出更好的网页布局效果。
使用vw配置响应式
这里拿 vue 举例
-
npm i postcss-px-to-viewport --save-dev -
在根路径创建postcss.config.js ，也就是src同级
-
module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px', // 需要转换的单位，默认为"px" viewportwidth: 1920, //设计稿的视口宽度 unitPrecision: 5, //单位转换后保留的精度 propList: [''], //能转化为vw的属性列表 viewportUnit: 'vw', //希望使用的视口单位 fontViewportUnit: 'vw', //字体使用的视口单位 selectorBlackList: [], //需要忽略的cSs选择器，不会转为视口单位，使用原有的px等单位o minPixelValue: 1, //设置最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: false, //媒体查询里的单位是否需要转换单位 replace: true, //是否直接更换属性值，而不添加备用属性 exclude: undefined, //忽略某些文件夹下的文件或特定文件，例如'node modules'下的文件 include: undefined, //如果设置了include,那将只有匹配到的文件才会被转换 landscape: false, //是否添加根据landscapewidth生成的媒体查询条件@media(orientation:landscape) landscapeUnit: 'w', //横屏时使用的单位 landscapewidth: 1920, //横屏时使用的视口宽度 }, }, }; -
重启项目
-
检查是否成功，可以看到单位已经自动转为vw，此时就是设置成功了
还可以配合媒体查询进行额外的操作
使用rem配置响应式
-
npm i postcss-pxtorem -save-dev -
与package.json同级目录创建postcss.config.js文件
module.exports = { plugins: { autoprefixer: { overrideBrowserslist: [ 'Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8', 'last 10 versions', // 所有主流浏览器最近10版本用 ], grid: true, }, 'postcss-pxtorem': { // 自适应，px -> rem转换 rootValue: 37.5, // 设计稿 75表示750 ， 37.5表示375 propList: ['*'], // 需要转换的属性，* 表示选择全部 unitPrecision: 5, // 单位转换后保留的精度 }, }, }; -
目前只实现了px转rem，借助其他包实现后续操作
npm i amfe-flexible -save-dev npm i autoprefixer -
在main.js引入 autoprefixer
import 'autoprefixer' -
重启项目，单位自动转换表示已成功
媒体查询
媒体查询是用来检测屏幕的特性，可以用来动态的应变不同的屏幕大小，以及你想要在哪些设备上加载你的CSS和JavaScript文件。
可以看看这两篇文章
