首页 > 其他分享 >前端项目使用vw视口单位进行适配时字体大小的解决方案

前端项目使用vw视口单位进行适配时字体大小的解决方案

时间:2023-04-27 15:33:06浏览次数:54  
标签:字体大小 适配 单位 放缩 视口 vw 文本

使用视口单位vw来实现响应式排版。1vw等同于视口宽度的百分之一,即如果你用vw来设定字体大小的话,字体的大小将总是随视口的大小进行改变。

问题在于,当做上面的事情的时候,因为文本总是随着视口的大小改变大小,用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用 viewport 单位设定文本。

例如我们使用postcss-px-to-viewport对vw进行转换,转换后的字体单位也是vw,当浏览器进行缩放时,字体会随之变大或变小

这里有一个解决方法,它使用了calc(),如果你将vw单位加到了使用固定大小(例如em或者rem)的值组,那么文本仍然是可放缩的。基本来说,是vw加在了放缩后的值上。

h1 {
  font-size: calc(1.5rem + 3vw);
}

然后再配合媒介查询中重新定义fontSize

标签:字体大小,适配,单位,放缩,视口,vw,文本
From: https://www.cnblogs.com/whh666/p/17359045.html

相关文章

  • 系统认知篇:防腐层、门面模式及适配模式的本质
    作者:京东科技倪新明门面模式和适配器模式是代码级的设计模式,而防腐层本质是一种防御型策略,在更高的层级对系统进行解耦1关于防腐层Anti-CorruptionLayer(ACL)如下:Implementafaçadeoradapterlayerbetweendifferentsubsystemsthatdon'tsharethesamesema......
  • 使用vant4+vw创建webapp项目
    包来源自动引入vue/vue-router/vuex等api (ref,toRefs....)npmiunplugin-auto-import--save-devvant按需导入的插件npmiunplugin-vue-components-D使用vw布局替换px单位插件npmipostcss-px-to-viewport--save-dev完整的vite.config.js文件import{......
  • 文字框自适配
    图片作为父物体,添加如下两个组件: 文本作为子物体,添加如下组件: 图片的延长方向设置可以在Recttransform中设置Pivot. ......
  • 适配器模式
    适配器模式定义:将一个类的接口转换成客户希望的另外一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。解决问题:已经存在类似功能的类或接口,但是方法签名不一样。适用性:*你想使用一个已经存在的类,而它的接......
  • DVWA(全级别通关教程详解)
    BruteForce(burp密码爆破 章节省略)CommandInjection1. 解决乱码问题 找到(phpstudy_pro/WWW/DVWA/dvwa/includes  下的page.php的文件,将utf-8字符全部改为gb2312字符)2. 输入自己想知道的信息的命令,eg:127.0.0.1&ipconfig127.0.0.1&systeminfo127.0.0.1&dirCSRF1......
  • 【前端可视化】前端大屏适配方案
    方案一:rem单位+动态设置html的font-size动态设置html根字体的大小和body字体大小(使用lib_flexible.js)将设计稿的宽(1920)平均分成24等份,每一份80px;html根字体大小就设置为80px,即1rem=80px,24rem=1920px(移动端推荐分为10份);将body字体大小设置为16p......
  • SQL注入漏洞--DVWA
    怎么判断sql注入漏洞呢?后台执行的SQL语句为SELECTfirst_name,last_nameFROMusersWHEREuser_id='$id';($id:用户输入的内容)用户输入的数据为:1'and1=1#这时SQL语句发生变化,在原有查询完成后会判断1=1(这明显是对的),如果判断正确才会有输出[#作用是注释(移除)后续SQL语......
  • dvwa存储型xss
    1、低级别查看服务端提示代码,直接返回未做处理。<script>alert(/xss/)</script>2、中级别查看服务端提示代码,使用htmlspecialchars函数对参数message进行实体编码,使用str_replace函数对参数name进行替代<script>为”。解决:从name参数着手,使用script大小写混杂或者其他标签......
  • dvwa使用
    1、介绍dvwa是一个基于php+mysql的web漏洞靶场项目,用户可以将其部署在本地,模拟测试和学习。可以是本地虚拟机安装,也可以考虑本地phpstudy搭建,但不建议将其部署到公共网络的主机上。phpstudy安装dvwa–学习狗2、漏洞类型BruteFroce爆破CommandInjection命令注入CSRF......
  • DVWA CSRF
    1、低级别csrf,get的url形式,参数在url中可以基于短链接触发2、中级别基于string函数,判断host值出现在referer字段中referer是http协议字段,在file协议中不存在3、高级别需要与xss结合4、不可能级别......