vue字体自适应

最新推荐文章于 2024-07-22 10:34:10 发布
最新推荐文章于 2024-07-22 10:34:10 发布
阅读量5.1k 收藏 5
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43413824/article/details/104659239
版权

最新编辑2021.09.14（以下部分内容有误，请勿参考）

分割线————————————————————

1:在项目中安装flexible
npm i lib-flexible --save-dev
2:项目入口文件main.js中引入lib-flexible:
import 'lib-flexible'
3:找到node_modules\lib-flexible\flexible.js文件修改里面的数值

在这里插入图片描述
修改第1处是设置屏幕宽度大于多少时字体变为最大倍数也就是第2处的数值，第3处数字越大变化越大，需要根据自己的情况而定。

4:字体单位为rem(不要用px)

在这里插入图片描述

优雅的颓丧
关注
专栏目录
vue使用echarts字体自适应
swagLi的博客
11-15 1407
<templete> <div id="echart" style="width:400px;height:400px"></div> </templete> <script> export default({ data(){ return{ chartCircle:null, circleOption:{}, screenW
vue 图片自适应排列插件_vue自适应布局3种方法
weixin_39997300的博客
01-13 2374
自适应是每个开发者必走的路，该篇掘文是前者踩过一些坑 而踏出来的几条路，希望这些经验能在开发的过程中帮助到大家！！！1.传统布局 => rem//方式一const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;document.querySelector('html').styl...
vue自动文本：vue自动文本|文字大小自适应组件
02-05
vue-auto-text |文字大小自适应组件 介绍 当给定宽度时，文字的大小自适应，以保证不溢出和换行 文件 安装 npm install vue-auto-text --save 使用 // 局部引入 import AutoText from 'vue-auto-text' export default { components : { AutoText } } // 全局引入 import AutoText from 'vue-auto-text' Vue . component ( AutoText . name , AutoText ) 道具参数 props: {
VUE 文字大小自适应
wulala37的博客
04-02 3617
VUE 文字大小自适应 font-size:calc(100vw * 24 / 1920); calc：是一个css自带的计算方法，可以自动计算后返回px单位的值 100vw：vw是屏幕的宽度。也就是百分百屏幕宽度。 *100：这里乘的100代表100px。 1920：设计稿的宽度 ...
创建vue3项目并配置PC端屏幕适配（同样也支持vue2）
最新发布
weixin_58495461的博客
07-22 1545
2.这里要和大家说的就是lib-flexible-computer这个npm装的依赖，想必大家为了做pc的适配搜索了很多方法他们大多数都是安装的下面这个依赖。3.选择项目所需要的依赖项(刚学习vue的同学建议选择安装（Linter / Formatter 支持代码风格检查和格式化）4.然后在src同级下建立一个vue.config.js文件（如果有就不需要重复创建了），并在此文件中加入以下代码。8.询问是否记录这一次的配置，以便下次使用，如一开始的时候会显示的vuecli3配置（这个根据自己的需求选择）
vue自适应字体大小
m0_74105134的博客
07-11 1901
方法使用了简单的 比例换算 公式，通过将当前视口宽度与初始宽 度进行比较，来确定一个转换系数。然后，这个转换系数会被 用于将给定的值。例如，如果你想将 字体大小从 初始宽度下的 16 像素转换为当前视口宽 度下的字体大小，可以 调用。创建一个用于根据当前视口宽度进行字体大小换算的方法。1.首先我在untils里面新建一个fontsize.js文件夹。表示 在当前视口 的宽度（以像素为单位），而。然后在main.js中全局注册。（初始宽度，默认为1920）。变量则保存了这个值。
Vue实现input宽度随文字长度自适应操作
10-15
主要介绍了Vue实现input宽度随文字长度自适应操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【文字自适应大小】vue文字字体大小自适应，根据屏幕大小变化字体自适应大小，简单方法
热门推荐
seeeeeeeeeee的博客
03-16 1万+
前端常遇到的一个情况是要做自适应的页面，但是有时候文字定了font-size后屏幕大小变化但是文字不跟着变。但是设置rem之类的也麻烦，这里就给一个简单的方法实现。 写法：利用css的自动计算方法calc font-size:calc(100vw * 100 / 1920); 解释一下： calc：是一个css自带的计算方法，可以自动计算后返回px单位的值 100vw：vw是屏幕的宽度。也就是百分百屏幕宽度。 *100：这里乘的100代表100px。 1920：设计稿的宽度 比如：我的需求是屏幕上要一个
移动端字体自适应
优雅的博客
02-28 9464
完美适口： 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域 就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑...
Js动态设置rem来实现移动端字体的自适应代码
10-21
在移动前端开发中，字体自适应是非常关键的一个环节，它能保证不同尺寸的设备上网页文本的显示效果都令人满意。文章内容主要涉及以下几个方面的知识点： 1. rem的概念：rem（root em）是CSS单位中的相对长度单位，...
详解vue-cli中使用rem,vue自适应
11-27
Vue CLI项目中使用`rem`和实现自适应布局可以帮助开发者创建响应式的用户体验。下面将详细解释`rem`的工作原理以及在Vue CLI项目中如何配置和使用。 ### 1. `rem`单位介绍 `rem`（root em）是CSS中的长度单位，...
vue-resize-text：vue指令，可根据元素宽度自动调整字体大小
02-05
Vue调整文字大小 Vue指令可根据元素宽度自动调整字体大小。 它使字体大小在灵活或响应式布局上具有灵活性。 ：调整浏览器视口的大小以查看实际效果 安装 通过NPM安装 $ npm install vue-resize-text --save 通过CDN安装 < script src =" https://unpkg.com/vue " > </ script > < script src =" https://unpkg.com/vue-resize-text " > </ script > 全球 全局注册VueResizeText： import Vue from 'Vue' ;
Vue下textarea文本框根据内容自适应改变高度
10-20
Vue自定义组件实现文本框根据文本内容自适应高度的效果，解决若输入文本量或显示文本量超过指定行数后，会出现垂直滚动条，但在IE环境下，该滚动条是隐藏的问题。
vue项目使用rem让页面字体fontsize自适应
weixin_44870969的博客
06-16 2579
页面字体font-size自适应
rem和em学习笔记及CSS预处理（未完待续）
weixin_30263277的博客
03-23 84
以下为读http://www.w3cplus.com/css/when-to-use-em-vs-rem.html的感悟，收获满满！ 1、当元素A的字体单位是n rem时，它将根据根元素（html）的font-size的大小作为基准，比如 <!DOCTYPE html> <html> <head> <meta ch...
vue 表格分页打印，字体自适应大小缩放。
weixin_40992252的博客
04-29 882
因表格内字数不确定，1页强制10行，有的页面很短，有的页面会超出，效果不好，需要每个单元格内大小自适应表格调整。通过计算每个单元格的大小、可容纳的文字数量与实际的文字数量的比例来动态控制每个单元格内文字的缩放比例。(3）同时要注意，字母，数字，英文标点符号，占的比例应该为字体的0.6倍左右，需要处理。单元格内字数如果超过可能容纳最多的字数，那么字体需要缩小，如果不超过，那么不需要缩小。如果字体大小超过默认字体大小，不需要改变，如果小于默认字体大小就是需要缩小的。(1) 计算每个单元格容纳的标准字体个数。
vue移动端实现文字根据屏幕大小自适应，不引入viewport.js的方式
xiaoxiaoyang007的博客
12-25 970
100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于100px。
Vue文字大小自适应
路虽远，行则必至！
10-30 399
calc：是一个css自带的计算方法，可以自动计算后返回px单位的值。100vw：vw是屏幕的宽度。也就是百分百屏幕宽度。*24：这里乘的24代表24px。1920：设计稿的宽度。
vue字体大小自适应
07-28
在Vue中实现字体大小自适应可以通过以下步骤： 1. 创建一个Vue组件，在模板中定义需要自适应字体大小的元素，例如一个`<div>`标签。 ```html <template> <div class="font-container"> 自适应字体大小的文本 </div> </template> ``` 2. 在组件的样式中定义字体大小的自适应规则。可以使用CSS的`@media`查询和`vw`单位来实现响应式字体大小。 ```html <style scoped> .font-container { font-size: 5vw; /* 使用vw单位设置字体大小 */ } @media (min-width: 768px) { .font-container { font-size: 30px; /* 在大屏幕上使用固定的字体大小 */ } } </style> ``` 在上述代码中，`font-size: 5vw;` 表示字体大小将根据视口的宽度自动调整。当视口宽度大于等于 768px 时，使用固定的字体大小 `font-size: 30px;`。 这样，当用户在不同的设备上浏览网页时，字体大小会根据设备的宽度进行自适应调整。 你也可以根据具体需求调整自适应规则，例如基于设备的高度或其他条件来设置字体大小。以上只是一个简单的示例。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值