1烫饼、淘寶 flexible 方案
工具 & 插件
- sublime
- cssrem -- 一個(gè)CSS值轉(zhuǎn)REM的Sublime Text插件
- lib-flexible -- 安裝依賴
配置
- 安裝 lib-flexible
- 在模版文件 index.html 中設(shè)置 meta 屬性
<meta name="viewport" content="width=device-width,inital-scale=1.0,maxmum-scale=1.0,minmum-scale=1.0,user-scalable=no">
- 在入口文件 index.js 中引入 lib-flexible
import 'lib-flexible'
引入 lib-flexible 更簡(jiǎn)便的方法是直接使用阿里CDN猎塞，在模板文件 index.html 中通過(guò)script標(biāo)簽引入
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
但是這樣做會(huì)有一個(gè)問(wèn)題，協(xié)議是 http杠纵，如果在 https 中這樣引入會(huì)出失敗
-
安裝 sublime 插件
- 下載項(xiàng)目
- 復(fù)制下載好的文件至 packages 目錄下
- 重啟即可
修改配置文件
進(jìn)入：Sublime Text -> Preferences -> Package Settings -> cssrem
{
// px 轉(zhuǎn) rem的單位比例荠耽，即 1rem = 37.52px，可以根據(jù)設(shè)計(jì)稿修改該值
"px_to_rem": 37.52,
// 設(shè)置 px 轉(zhuǎn)化為 rem 保留幾位小數(shù)
"max_rem_fraction_length": 2,
// 設(shè)置對(duì)哪些文件啟用該插件
"available_file_types": [".css", ".less", ".sass", ".scss", ".vue"]
}
2比藻、lib-flexible 的另一種實(shí)現(xiàn)
前面的方案有一定局限性铝量，比如只有在 sublime 中才能使用倘屹，而且需要手動(dòng)轉(zhuǎn) px 為 rem，我們可以通過(guò)其他項(xiàng)目依賴實(shí)現(xiàn)相同的效果慢叨。
插件
- lib-flexible
- px2rem-loader
使用
使用 vue init webpack my-app 創(chuàng)建一個(gè)項(xiàng)目
安裝 flexible纽匙，引入（同上）
npm install px2rem-loader --save-dev
- 修改配置文件
- build -> utils.js
exports.cssLoaders = function (options) {
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
// 引入 px2rem-loader
const px2remLoader = {
loader: 'px2rem-loader,
options: {
// px 轉(zhuǎn) rem 的比例，視設(shè)計(jì)圖而定
remUnit: 37.5
}
}
// 添加 px2rem-loader
function generateLoaders (loader, loaderOptions) {
// 在下面的數(shù)組中添加 px2rem
const loaders = options.usePostCSS ? [cssLoader, px2remLoader, postcssLoader] : [cssLoader, px2remLoader]
}
}
這樣的話這個(gè) loader 會(huì)自動(dòng)將我們寫(xiě)的 px 轉(zhuǎn)為 rem拍谐，配合跟元素大小的隨視口大小改變烛缔，可以實(shí)現(xiàn)移動(dòng)端的適配。
3轩拨、vw / vh
如果不考慮適配比較老舊版本的瀏覽器践瓷，完全可以使用 vw / vh 布局，分別表示視口寬度/高度亡蓉。100vw 等于整個(gè)視口的寬度晕翠，100vh 等于整個(gè)視口的高度。
- vw : 1vw 為視口寬度的 1%
- vh : 1vh 為視口高度的 1%
- vmin : vw 和 vh 中的較小值
- vmax : 選取 vw 和 vh 中的較大值
總而言之砍濒，如果設(shè)計(jì)稿為 750px淋肾，那么 1vw = 7.5px，100vw = 750px梯影。其實(shí)設(shè)計(jì)稿按照設(shè)么都沒(méi)多大關(guān)系巫员，最終轉(zhuǎn)化過(guò)來(lái)的都是相對(duì)單位，我們可以使用插件幫助我們把書(shū)寫(xiě)的 px 轉(zhuǎn)為 vw / vh甲棍。
不過(guò)简识，使用 vw 具有一定的缺陷：
- px轉(zhuǎn)換成vw不一定能完全整除，因此有一定的像素差感猛。
- 比如當(dāng)容器使用vw七扰，margin采用px時(shí)，很容易造成整體寬度超過(guò)100vw陪白，從而影響布局效果颈走。當(dāng)然我們也是可以避免的，例如使用padding代替margin咱士，結(jié)合calc()函數(shù)使用等等...
插件
- postcss-px-to-viewport
使用
- npm install postcss-px-to-viewport --save-dev
- 在 postcss.config.js 添加配置
相關(guān)配置項(xiàng)參考官方 github 倉(cāng)庫(kù)
module.exports = {
plugins: {
"postcss-px-to-viewport": {
// 常用配置立由，更多配置參考官方
// 需要轉(zhuǎn)換的單位
unitToConvert: 'px',
// 設(shè)計(jì)稿的視口寬度
viewportWidth: 375,
// 單位轉(zhuǎn)換后保留的精度
unitPrecision: 5,
}
}
}
