web移动端自适应vw、vh、rem
vw+vh+rem
一、vw、vh
vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（视口宽度等于设备宽度，初始不缩放，用于解决页面宽高自动适配屏幕）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
1vw等于设备宽度的1%，同理1vh等于设备高度的1%，百分比布局
px转vw
https://developer.aliyun.com/mirror/npm/package/postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: 375,
unitPrecision: 3,
viewportUnit: 'vw',
selectorBlackList: ['.ignore', '.hairlines'],
minPixelValue: 1,
mediaQuery: false
},
'postcss-viewport-units': {
filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1
},
cssnano: {
preset: 'advanced',
autoprefixer: false,
'postcss-zindex': false
}
}
}
'二、rem
相对单位，根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。
举例：浏览器默认html的字体大小为16px，则1rem=16px
三、rem配置(方式1）
px自动转换rem，postcss-pxtorem
github:GitHub - cuth/postcss-pxtorem: Convert pixel units to rem (root em) units using PostCSS
npm install postcss-pxtorem -D
自动转换设置（vue-cli3）
module.exports = {
plugins: {
autoprefixer: {},
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 10,
propList: ['*']
}
}
}
'四、rem配置(方式2）
更多详情可参考：移动端适配方案 - OSCHINA - 中文开源技术交流社区
1. lib-flexible，手淘开发，用于适配移动端的开源库
安装lib-flexible
github:GitHub - amfe/lib-flexible: 可伸缩布局方案
npm install lib-flexible --save-dev
npm install px2rem-loader --save-dev
2. 引入（vue）
import 'lib-flexible'
3. 配置（vue-cli3.0）
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 75
}),
]
}
}
},
};
4. 修改最大适配尺寸
依赖包中打开./node_modules/lib-flexible/flexible.js
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
'五、rem配置(方式3）rem.js
参考：使用rem.js快速进行移动端适配 - 简书
两个参数分别是designWidth 和maxWidth，顾名思义，就是我们设计稿的宽度和我们设定的最大宽度
main.js中引入rem.js(vue)
(function (designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var tid;
var rootItem, rootStyle;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
console.log(width,"width",maxWidth,"maxWidth")
if (!maxWidth) {
maxWidth = 540;
}
;
if (width > maxWidth) {
width = maxWidth;
}
var rem = width * 10 / designWidth;
rootStyle = "html{font-size:" + rem + 'px !important}';
rootItem = document.getElementById('rootsize') || document.createElement("style");
if (!document.getElementById('rootsize')) {
document.getElementsByTagName("head")[0].appendChild(rootItem);
rootItem.id = 'rootsize';
}
if (rootItem.styleSheet) {
rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
} else {
try {
rootItem.innerHTML = rootStyle
} catch (f) {
rootItem.innerText = rootStyle
}
}
docEl.style.fontSize = rem + "px";
};
refreshRem();
win.addEventListener("resize", function () {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
})(375, 750);
相关知识
移动端
移动Web实训DAY
移动端动态rem的计算方法 (1rem = 100px）
绿色园林建筑艺术网站模板花卉园艺网站源码下载pbootcms（自适应移动端）
（自适应手机端）花店鲜花配送网站模板 花卉园艺送花类网站源码
Vue+Echarts 大屏自适应缩放解决方案 = 使用transform:scale
【自适应手机端】花卉网站模板，鲜花网页设计及源码
PHP响应式花卉插花培训企业公司网站整站源码(自适应手机移动端) eyoucms内核
HTML5响应式鲜花绿植花店销售展示类网站模板(自适应手机端)
基于深度卷积神经网络的移动端花卉识别系统
网址: web移动端自适应vw、vh、rem https://m.huajiangbk.com/newsview948658.html
| 上一篇: 基于Viewport的移动端we |
下一篇: 前端CSS网页布局新技术（双屏和 |
