一. 引入淘宝 flexible
Flexible会将视觉稿分成100份，而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：(设计稿为750px为例）
1a = 7.5px
1rem = 75px
这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。
* 更多关于 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为设计稿的一半
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>标题</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>
三. 单位转化 px转为rem
安装 postcss-px2rem-exclude
npm install postcss-px2rem-exclude
在项目根目录 找到 .postcssrc.js 修改为
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"postcss-import": {},
"autoprefixer": {},
"postcss-px2rem-exclude": {
"remUnit": 75, //换算的基数，1rem == 75px
"exclude": /node_modules/i //屏蔽第三方组件库，避免把第三方组件库的px也转成rem，这里是屏蔽了所有第三方，也可以屏蔽单独的某一个第三方组件库。
}
}
}
四. 字体建议使用px
如果有slogan之类大于48px的，可以使用rem
* 此时会有一个问题，就是当你使用 scss/sass 的时候 使用 /no/和/px/ 来屏蔽字体大小的时候是不生效的，只有在css中才会生效，解决办法 比较偷鸡 把单位 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);
}
//使用时 @include f12px 就可以了
在实际使用的时候还会遇到一个问题是 需要在js中 计算 px转rem ， flexible其实是有写好的方法的
1577932083(1).jpg
使用 ： lib.flexible.px2rem(val) ; val有px单位时 返回的是带有rem单位的字符串，val为数字时，返回的是不带单位但转化好的数字。
网友评论