思路分析
使用 postcss-pxtorem 自动将 px 转为 rem;
结合当前浏览器窗口宽高及 orientation 来判断当前设备横竖屏状态；
根据当前横竖屏状态采用不同处理逻辑；
创建项目
vue init webpack vue-horizontal-demo
具体步骤
安装命令
npm i postcss-pxtorem --save-dev
打开 build/vue-loader.conf.js 加入 px2rem 配置
"use strict";
const utils = require("./utils");
const config = require("../config");
const px2rem = require("postcss-pxtorem");
const isProduction = process.env.NODE_ENV === "production";
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap;
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ["src", "poster"],
source: "src",
img: "src",
image: "xlink:href"
},
postcss: function() {
return [
px2rem({
rootValue: 75,
propList: ["*", "!border"],
minPixelValue: 1
})
];
}
};
在 index.html 中加入计算 font-size 代码
window.calcFontSize = () => {
document.documentElement.style.fontSize =
Math.min(
document.documentElement.clientWidth,
document.documentElement.clientHeight
) /
10 +
"px";
};
window.calcFontSize();
增加?horizontal-screen 全局指令
Vue.directive("horizontal-screen", {
bind(el, binding, vnode) {
let self = vnode.context;
let getDocumentSize = () => [
document.documentElement.clientWidth,
document.documentElement.clientHeight
];
// 设备开启竖屏锁定，强制横屏模式
let vertical = () => {
let [width, height] = getDocumentSize();
el.style.transform = `rotate(90deg)`;
el.style.transformOrigin = width / 2 + ‘px center‘;
el.style.width = height + ‘px‘;
el.style.height = width + ‘px‘;
};
// 设备关闭竖屏锁定，横屏时，还原成正常模式
let reset = () => {
let [width, height] = getDocumentSize();
el.style.transform = `rotate(0deg)`;
el.style.width = `${width}px`;
el.style.height = `${height}px`;
};
el.resize = function() {
if (document.activeElement.nodeName === "INPUT") return; // 兼容安卓
window.calcFontSize();
if ([null, 180, 0].includes(window.orientation)) {
vertical();
} else if ([90, -90].includes(window.orientation)) {
reset();
}
};
el.resize();
el.click = e => {
if (e.target.nodeName === "INPUT") {
reset();
} else if (![90, -90].includes(window.orientation)) {
vertical();
}
};
window.addEventListener("click", el.click, false);
window.addEventListener("resize", el.resize, false); // 兼容安卓
window.addEventListener("orientationchange", el.resize, false);
},
unbind(el, binding, vnode) {
window.removeEventListener("click", el.click, false);
window.removeEventListener("resize", el.resize, false);
window.removeEventListener("orientationchange", el.resize, false);
}
});
在页面最外层的容器加上 ‘v-horizontal-screen‘ 即可
原文：/olivers/p/12719927.html
