響應式布局
- 通過媒體查詢 @media
- 寫兩套代碼,一套pc,一套移動端,通過userAgent判斷用戶使用的設備,跳轉(zhuǎn)到相應的網(wǎng)站
移動端適配(rem)
一. 元素的度量單位
1. px像素
2. em根據(jù)父元素來計算大小（項目中比較少用）
3. rem根據(jù)根節(jié)點(html)元素的font-size進行計算大小
4. vw/vh根據(jù)手機屏幕計算大小
5. rpx小程序特有單位
二. rem計算公式: 元素的寬度(高度)= html的font-size * rem
三. 使用rem進行移動端適配的原理
1. 以ipone6寬度作為參考,給它的根標簽設置大小
2. 獲取手機的屏幕寬度,根據(jù)屏幕寬度,以iphone作為參照物進行等比縮放
在項目中配置rem
一. 用來根據(jù)手機寬度設置根元素字體的大小
- 安裝 amfe-flexible,
- 并在main.js中導入
import 'amfe-flexible';
二. px轉(zhuǎn)成rem,免去我們手動輸入rem
安裝 postcss-pxtorem
-
在vue.config.js中進行配置
const autoprefixer = require('autoprefixer'); const pxtorem = require('postcss-pxtorem'); module.exports = { css: { loaderOptions: { postcss: { plugins: [ autoprefixer(), pxtorem({ rootValue: 37.5, propList: ['*'], // 該項僅在使用 Circle 組件時需要 // 原因參見 https://github.com/youzan/vant/issues/1948 selectorBlackList: ['van-circle__layer'] }) ] } } } };- 封裝完成后，在main.js中導入,將封裝好的方法結(jié)構(gòu)出來犹褒， 并添加到vue原型中
三. css的處理
- less、sass、stylus 預處理語言，方便我們模塊化編寫代碼,必須編譯成css文件才能使用
- postcss 用來對css文件進行處理,稱之為后處理語言
