移动端适配 (手淘)
在html页面中引入以下flexible.js
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=a.navigator.userAgent,q=(!!p.match(/android/gi),!!p.match(/iphone/gi)),r=q&&!!p.match(/OS 9_3/),s=a.devicePixelRatio;i=q&&!r?s>=3&&(!i||i>=3)?3:s>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var t=e.createElement("div");t.appendChild(g),e.write(t.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
flexible实际上就是能过JS来动态改写meta标签
- 动态改写<meta>标签
- 给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
- 给<html>元素添加font-size属性，并且动态改写font-size的值
视觉稿 px 改成 rem
- 在sublime中使用CSSREM 插件就可以将
px转换为rem - 在webpack中使用PostCSS插件postcss-pxtorem
npm install --save-dev postcss-load-config postcss-loader postcss-pxtorem sass-loader style-loader css-loader
新建文件postcss.cinfig.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 75,
propWhiteList: [],
}
}
}
webpack.config.js
{
test: /\.scss$/,
include: resolve(__dirname, "src/js"),
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}, {
loader: "postcss-loader"
}]
}
文字大小不使用rem
webpack.config.js
//公有样式,不使用postcss
{
test: /\.scss$/,
include: resolve(__dirname, "src/styles"),
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader", // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
minxins.scss
@mixin font-dpr($font-size){
font-size: $font-size / 2;
[data-dpr="2"] & {
font-size: $font-size;
}
[data-dpr="3"] & {
font-size: $font-size * 1.5;
}
}
app.scss
@import "./mixins.scss";
// 请保证你的设计稿为750px宽，如果有其余字体大小，请在私有样式中设置
.font-20 {@include font-dpr(20px);}
.font-22 {@include font-dpr(22px);}
.font-24 {@include font-dpr(24px);}
.font-26 {@include font-dpr(26px);}
.font-28 {@include font-dpr(28px);}
.font-30 {@include font-dpr(30px);}
.font-32 {@include font-dpr(32px);}
.font-34 {@include font-dpr(34px);}
.font-36 {@include font-dpr(36px);}
.font-38 {@include font-dpr(38px);}
.font-40 {@include font-dpr(40px);}
.font-42 {@include font-dpr(42px);}
.font-44 {@include font-dpr(44px);}
.font-46 {@include font-dpr(46px);}
.font-48 {@include font-dpr(48px);}
.font-50 {@include font-dpr(50px);}
.font-52 {@include font-dpr(52px);}
.font-54 {@include font-dpr(54px);}
