美文网首页
vue项目的pc适配笔记

vue项目的pc适配笔记

作者: Yl奋斗的小白 | 来源:发表于2020-11-03 17:06 被阅读0次

创建js文件

export const resetPc = () => {
    var wH = window.innerHeight; // 当前窗口的高度
    var wW = window.innerWidth; // 当前窗口的宽度
    var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
    if (wW > 1400) {
        var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
        var html = document.documentElement;
        console.log(rem);
        html.style.fontSize = rem + "px"; //适用于PC网站
    } else {
        var rem = 1400 * whdef;
        var html = document.documentElement;
        html.style.fontSize = rem + "px";
    }
}

在app.vue中引入并在created生命周期里使用,100px=1rem

import { resetPc } from "./utils/resetPc";


created() {
    // console.log('reset')
    resetPc();
    window.addEventListener("resize", function() {
      resetPc();
    });
  },

相关文章

  • vue项目的pc适配笔记

    创建js文件 在app.vue中引入并在created生命周期里使用,100px=1rem

  • vue一套代码适应移动端,pc端

    一、 使用场景:有适配pc端改为适配pc端和移动端,使用2套css代码实现App.vue 注意:为2套css分别指...

  • vue pc端适配

    以1920px的设计稿为基准,使用postcss-plugin-px2rem自动将px转rem 1.新建一个res...

  • PC端页面适配

    pc端的适配需求:目前我们pc项目的设计稿尺寸是宽度1920,高度最小是1080。 适配目标:1.在不同分辨率的电...

  • uniapp中H5端PC宽屏适配

    一、创建pc.js文件 二、App.vue添加适配样式 三、main.js中引入pc.js(要在导入app示例之前引入)

  • vue 项目开发规范文档

    一、 目录结构 二、 UI框架选择PC端Vue项目UI框架优先选择:Element UI、iView移动端Vue项...

  • vue学习笔记(3)——router

    githubvue学习笔记(1)主要介绍vue项目的创建vue学习笔记(2)主要介绍项目的基本设置,如axios设...

  • vue学习笔记(2)——基础设置

    githubvue学习笔记(1)主要介绍vue项目的创建vue学习笔记(3)主要介绍vue的router简单用法对...

  • pc适配

    图片宽度百分比,高度自动 字体行高不写单位,按当前字体的倍数写 合理设置媒体查询的断点(以及断点之间可能可以换算的...

  • react使用 postcss-px-to-viewport

    react 项目中css样式px自动转vw,适配移动端和pc端。修改下配置项里面的viewportWidth和vi...

网友评论

      本文标题:vue项目的pc适配笔记

      本文链接:https://www.haomeiwen.com/subject/nihivktx.html