vue项目PC端字体大小自适应

在App.vue文件中直接放入以下代码即可

<template><div id="app"><router-view></router-view></div>
</template>
<script>
export default {data() {return {};},mounted: function () {// 页面开始加载时修改font-sizevar html = document.getElementsByTagName("html")[0];var oWidth =document.body.clientWidth || document.documentElement.clientWidth;// 这里的1920是指设计图的大小,自己根据实际情况改变html.style.fontSize = (oWidth / 1920) * 100 + "px";console.log("rem:", html.style.fontSize);},
};
</script>
<style lang="scss" scoped>
//这些屏幕宽度是根据我自己需要设置的
@media screen and (max-width: 1396) {#app {font-size: 0.16rem;}
}
@media screen and (min-width: 1396) and (max-width: 1536px) {#app {font-size: 0.5rem;}
}
@media screen and (min-width: 1536px) and (max-width: 1920px) {#app {font-size: 1rem;//我这里是按1920的屏幕宽度设置的，所以1rem相当于100px}
}
@media screen and (min-width: 1920px) {#app {font-size: 0.16rem;}
}
</style>

vue项目PC端字体大小自适应相关推荐

Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
vue项目PC端屏幕分辨率与窗口大小自适应
效果 #mermaid-svg-O0n9N0Pq5xuLBK3e .label{font-family:'trebuchet ms', verdana, arial;font-family:var(- ...
vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）
1.使用vue-cli创建项目 vue create my-app 2.安装lib-flexible与postcss-pxtorem依赖 npm install lib-flexible -Snpm ...
vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
html字大小自适应,html字体大小自适应怎样让HTML字体自适应到移动端？
如何设置中的字体大小随 height变化而自 first line html如何实现字体大小的自适应字体的单位用百分比即可. html页面怎样能够自适应电脑屏幕宽度? 在1024*768或者800* ...
vue的pc端适配vw vh rem
安装命令: npm i postcss-px-to-viewport@1.1.1npm i postcss-pxtorem@5.1.1 2.安装完之后在根目录新建postcss.config.js(和 ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
vue项目实现大屏展示自适应问题
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局. 一.安装 postcss-px ...

vue项目PC端字体大小自适应

vue项目PC端字体大小自适应相关推荐

最新文章

热门文章