一. 引入淘寶 flexible
Flexible會(huì)將視覺稿分成100份，而每一份被稱為一個(gè)單位a。同時(shí)1rem單位被認(rèn)定為10a。針對我們這份視覺稿可以計(jì)算出：(設(shè)計(jì)稿為750px為例）
1a = 7.5px
1rem = 75px
這樣一來，對于視覺稿上的元素尺寸換算，只需要原始的px值除以rem基準(zhǔn)值即可。例如此例視覺稿中的圖片，其尺寸是176px * 176px,轉(zhuǎn)換成為2.346667rem * 2.346667rem。
* 更多關(guān)于 flexible 的作用與用法 請自行查詢
flexible 的cdn地址：http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js
二. 適配平板
如果只是單純的引入flexible，在平板上并不是能夠完成適配
所以要加上這樣一段代碼（與引入的flexible 有先后順序）：
<script>
;/(iPhone|iPad|iPhone OS|Phone|iPod|iOS|Android)/i.test(navigator.userAgent) &&
((head = document.getElementsByTagName('head')),
(viewport = document.createElement('meta')),
(viewport.name = 'viewport'),
(viewport.content =
'target-densitydpi=device-dpi, width=375px, user-scalable=no'),
head.length > 0 && head[head.length - 1].appendChild(viewport))
</script>
整體index.html 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
//該行要注釋
<!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="renderer" content="webkit">
<meta http-equiv="cache-control" content="no-siteapp">
<meta name="format-detection" content="telephone=no, email=no">
<meta name="apple-mobile-web-app-capable"content="yes">
<meta name="apple-mobile-web-app-status-bar-style"content="black"/>
<script>
;/(iPhone|iPad|iPhone OS|Phone|iPod|iOS|Android)/i.test(navigator.userAgent) &&
((head = document.getElementsByTagName('head')),
(viewport = document.createElement('meta')),
(viewport.name = 'viewport'),
(viewport.content =
'target-densitydpi=device-dpi, width=375px, user-scalable=no'), // 375為設(shè)計(jì)稿的一半
head.length > 0 && head[head.length - 1].appendChild(viewport))
</script>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<title>標(biāo)題</title>
</head>
<body>
<div id="kalaMaster"></div>
<!-- built files will be auto injected -->
<script src="https://images.aiyingshi.com/VUELib/js/axios.min.js"></script>
<script src="https://images.aiyingshi.com/VUELib/js/vue.min.js"></script>
</body>
</html>
三. 單位轉(zhuǎn)化 px轉(zhuǎn)為rem
安裝 postcss-px2rem-exclude
npm install postcss-px2rem-exclude
在項(xiàng)目根目錄 找到 .postcssrc.js 修改為
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"postcss-import": {},
"autoprefixer": {},
"postcss-px2rem-exclude": {
"remUnit": 75, //換算的基數(shù)，1rem == 75px
"exclude": /node_modules/i //屏蔽第三方組件庫，避免把第三方組件庫的px也轉(zhuǎn)成rem，這里是屏蔽了所有第三方，也可以屏蔽單獨(dú)的某一個(gè)第三方組件庫。
}
}
}
四. 字體建議使用px
如果有slogan之類大于48px的，可以使用rem
* 此時(shí)會(huì)有一個(gè)問題，就是當(dāng)你使用 scss/sass 的時(shí)候 使用 /no/和/px/ 來屏蔽字體大小的時(shí)候是不生效的，只有在css中才會(huì)生效，解決辦法 比較偷雞 把單位 px 改為 Px/PX
//util.js
@mixin px2px($n){
font-size: $n * 1Px;
[data-dpr="2"] & {
font-size: $n * 1Px;
}
// for mx3
[data-dpr="2.5"] & {
font-size: ($n * 2.5 / 2) * 1Px;
}
// for 小米note
[data-dpr="2.75"] & {
font-size: ($n * 2.75 / 2) * 1Px;
}
[data-dpr="3"] & {
font-size: ($n / 2 * 3) * 1Px;
}
// for 三星note4
[data-dpr="4"] & {
font-size: $n * 2Px;
}
}
@mixin f32px{
@include px2px(32);
}
@mixin f28px{
@include px2px(28);
}
@mixin f26px{
@include px2px(26);
}
@mixin f24px{
@include px2px(24);
}
@mixin f22px{
@include px2px(22);
}
@mixin f20px{
@include px2px(20);
}
@mixin f18px{
@include px2px(18);
}
@mixin f16px{
@include px2px(16);
}
@mixin f14px{
@include px2px(14);
}
@mixin f12px{
@include px2px(12);
}
@mixin f10px{
@include px2px(10);
}
//使用時(shí) @include f12px 就可以了
在實(shí)際使用的時(shí)候還會(huì)遇到一個(gè)問題是 需要在js中 計(jì)算 px轉(zhuǎn)rem ， flexible其實(shí)是有寫好的方法的
使用 ： lib.flexible.px2rem(val) ; val有px單位時(shí) 返回的是帶有rem單位的字符串，val為數(shù)字時(shí)，返回的是不帶單位但轉(zhuǎn)化好的數(shù)字。
