设备像素比 ＝ 物理像素 / 设备独立像素
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
# 阿里CDN引入 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> # 下载对应的文件，直接在页面中引入。 # 当然也可以 npm i -S amfe-flexible
# 动态改写<meta>标签#
给<html>元素添加data-dpr属性，并且动态改写data-dpr的值#
给<html>元素添加font-size属性，并且动态改写font-size的值
var metaEl = doc.createElement(‘meta‘);
var scale = isRetina ? 0.5:1;metaEl.setAttribute(‘name‘, ‘viewport‘);
metaEl.setAttribute(‘content‘, ‘initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);
if (docEl.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement(‘div‘);
wrap.appendChild(metaEl);
documen.write(wrap.innerHTML);
}
1vw = window.innerWidth 的 1%
# grunt npm install grunt-postcss --save-dev #webpack npm install postcss-loader --save-dev
module.exports = function(grunt) {
grunt.initConfig({
postcss:{
options:{
// 配置postCSS所需插件
processors:[
// 这是postCSS插件
// 自动添加前缀
require(‘autoprefixer‘),
// 适配方案
require(‘postcss-px-to-viewport‘)({
viewportWidth: 750,
viewportHeight: 1670,
unitPrecision: 5,
viewportUnit: ‘vw‘,
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
})
]
},
dist:{
// 设置CSS的源文件和postCSS编译后的CSS文件
src: ‘src/style.css‘, // 源文件
dest: ‘dest/style.css‘ // 输出文件
}
}
});
grunt.loadNpmTasks(‘grunt-postcss‘);
}
module: {
loaders: [
{
test: /\.css$/,
// 如果使用了 ExtractTextPlugin
loader: ExtractTextPlugin.extract(‘style‘, ‘css!postcss‘)
// 否则
// loader: "style-loader!css-loader!postcss-loader"
}
]
},
// 当然，你也可以在根目录下设置.postcssrc.js中添加对postCSS的配置，会自动识别。
postcss: function () {
return [ // 里面是我们要用的插件
// 自动添加前缀
require(‘autoprefixer‘),
// 适配方案
require(‘postcss-px-to-viewport‘)({
viewportWidth: 750,
viewportHeight: 1670,
unitPrecision: 5,
viewportUnit: ‘vw‘,
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
})
];
}
// 动态计算px的大小，比如设计稿的尺寸宽是750px
(function（dew){
var winW = document.documentElement.clientWidth;
var ratio = winW/desW;
document.documentElement.style.fontSize = ratio * 100 + ‘px‘;
})(750);
//在css中对根字体大小进行设置：
// html,body{
// font-size:100px;
// }
// 这样我们在对UI给的尺寸直接除以100，就是对应的rem单位了。
原文：https://www.cnblogs.com/yangsg/p/10197212.html