标签：el style px 默认 width window 横屏 resize 页面

思路分析

1. 使用 postcss-pxtorem 自动将 px 转为 rem;
2. 结合当前浏览器窗口宽高及 orientation 来判断当前设备横竖屏状态；
3. 根据当前横竖屏状态采用不同处理逻辑；
   

创建项目

vue init webpack vue-horizontal-demo

具体步骤

1. 安装命令

npm i postcss-pxtorem --save-dev

2. 打开 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
            })
        ];
    }
};

3. 在 index.html 中加入计算 font-size 代码

<script>
    window.calcFontSize = () => {
        document.documentElement.style.fontSize =
            Math.min(
                document.documentElement.clientWidth,
                document.documentElement.clientHeight
            ) /
                10 +
            "px";
    };

    window.calcFontSize();
</script>

4. 增加 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);
    }
});

5. 在页面最外层的容器加上 'v-horizontal-screen' 即可

标签：el,style,px,默认,width,window,横屏,resize,页面
来源： https://www.cnblogs.com/olivers/p/12719927.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。