vue项目实现大屏PC端字体自适应

我们字体自适应选择使用rem作为单位，通过监听窗口大小的变化，更新1rem的对应的px数来实现字体自适应。

注意该方法，我们需要在APP.vue文件中实现，

首先APP.vue文件中，定义屏幕宽度的变量screenWidth

data() {return {screenWidth:window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth,};},

监听窗口变化，将值赋给screenWidth看，注意监听方法写在mounted(){}钩子中，防止无法获取窗口值。

mounted() {const that = this;window.onresize = () => {return (() => {(window.screenWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth),(that.screenWidth = window.screenWidth);this.fun();})();};},

为了避免频繁触发resize函数导致页面卡顿，使用定时器和watch:{}监听screenWidth值的改变，一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth

 watch: {screenWidth(val) {// 为了避免频繁触发resize函数导致页面卡顿，使用定时器if (!this.timer) {// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidththis.screenWidth = val;this.timer = true;let that = this;setTimeout(function () {that.timer = false;}, 400);}},},

最后定义fun函数，设置html标签的字体大小自适应为了使得rem单位自适应

 methods: {fun() {const that = this;var htmlobj = document.getElementsByTagName("html")[0];htmlobj.style.fontSize = (that.screenWidth / 1920) * 20 + "px";}}

echarts图标字体无法生效，可以查看下一篇文章，解决问题。

**
完整代码如下：

<script >
export default {name: "App",data() {return {screenWidth:window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth,};},created() {this.lastTime = new Date().getTime();this.fun();},mounted() {const that = this;window.onresize = () => {return (() => {(window.screenWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth),(that.screenWidth = window.screenWidth);this.fun();})();};},watch: {screenWidth(val) {// 为了避免频繁触发resize函数导致页面卡顿，使用定时器if (!this.timer) {// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidththis.screenWidth = val;this.timer = true;let that = this;setTimeout(function () {that.timer = false;}, 400);}},},methods: {// 设置html标签的字体大小自适应   为了使得rem单位自适应fun() {const that = this;var htmlobj = document.getElementsByTagName("html")[0];htmlobj.style.fontSize = (that.screenWidth / 1920) * 20 + "px";}},
};
</script>

echarts图标字体无法生效，可以查看下一篇文章，解决问题。

vue项目实现大屏PC端字体自适应相关推荐

VUE 项目实现大屏展示的响应式
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应. 首先下载lodash插件. npm i ...
vue项目实现大屏展示自适应问题
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局. 一.安装 postcss-px ...
Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
vue项目：大屏自适应解决方案（两种）
css缩放方案: 利用transform:scale 进行适配推荐使用v-scale-screen 值得注意的是: vue 2.6.2.7 要使用 npm install v-scale-scree ...
Vue项目实战 —— 后台管理系统( pc端 )
前期回顾我只写注释 -- 让Ai写代码_的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_的博客-CSDN博客https://blog.csdn.net/m0_57 ...
vue项目rem 大屏可视化适配
在工具文件夹中创建一个新的JS文件 JS文件中创建一个方法 // 如果页面发生改变更改rem得值 function setRem() {// 默认使用100px作为基准大小const baseSiz ...
移动端知网下文献并投屏PC端阅读
移动端知网下文献并投屏PC端阅读安装手机版知网准备投屏流程结语 **五月九号增加** 受新型冠状病毒影响,寒假期间不仅不能提前返校,还通知要推迟开学. 没办法,只能在家"上班工作&qu ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...

vue项目实现大屏PC端字体自适应

vue项目实现大屏PC端字体自适应

vue项目实现大屏PC端字体自适应相关推荐

最新文章

热门文章