新建font.js文件，写入以下代码

export function fontSize(res) {let docEl = document.documentElement,clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;if (!clientWidth) return;let fontSize = 100 * (clientWidth / 750);//这里的750是指屏幕的宽度，看设计稿自行更换return res * fontSize;
}
export default {fontSize,
};

在main.js里引入并使用

import fontSize from "./assets/js/font.js";
Vue.prototype.$fontSize = fontSize;

使用时动态绑定内联样式，给变量使用这个js赋值
我以一个进度条的宽度举例

<h3 :style="font-size:qwe"></h3>data(){return{qwe:0}
}mounted() {this.qwe=this.$fontSize.fontSize(0.24)
}

会vue的应该能看懂…不具体写了，这时就给 h3 这个标签赋值 24px，在页面上显示时会和使用了 px2rem 是一样的效果，自动转成 rem 单位

❀❀❀❀❀❀完结散花❀❀❀❀❀❀

Written ❤️ sywdebug.

使用fontSize做内联样式的自适应相关推荐

React 项目----内联样式style的使用（12）
在此我们之前学习了react的基本的语法,对于页面我们还经常关注的是页面的样式,那么react 项目中,我们应该如何使用样式首先我们来做一个简单的页面一个评论的列表模拟数据: commentLis ...
react内联样式_React样式化的组件：内联样式+ 3种其他CSS样式化方法（带有示例）...
react内联样式 There's no one right way to style your React components. It all depends on how complex you ...
css vue 内联_04-Vue基础-css和内联样式绑定
v-bind 及 class 与 style 绑定 1. 绑定 class 的集中方式 1.1. 对象语法给class设置一个对象,可以动态切换class.例如: var app = new Vue ...
HTML基础内联样式改进三毛语录
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关练习的案例
CSS学习笔记 CSS的基本概念 Cascading Style Sheet层叠样式表标签:<p> <div>-之类的标签使用方式:直接输入标签名类(class):cla ...
微信小程序开发实战基础二、wxml模板，动态更新内联样式
1.模板使用 1.wxml中创建模板 <template name="msgItem"> <view> <text> {{index}}: {{ ...
H5 css引入方式内联样式表
内联样式表通过style标签进行设置 <html> <head> <meta charset="utf-8"> <title>引入 ...
html内联样式（表），外部样式表
内联样式:直接在元素开始标签中定义style <!DOCTYPE html> <html><body style="background-color:Powde ...
干货来袭！CSS的行内样式与内联样式，看完就会了
什么是行内样式行内样式,其实从它的名字就可以看出来它的特点,就是直接在 HTML 标签中使用 style 属性设置 CSS 样式.例如像下面这样的: <p style="font-s ...

使用fontSize做内联样式的自适应

❀❀❀❀❀❀完结散花❀❀❀❀❀❀

使用fontSize做内联样式的自适应相关推荐

最新文章

热门文章