首页 > 其他分享 >calc配合rem自适应屏幕宽度

calc配合rem自适应屏幕宽度

时间:2024-01-26 21:37:16浏览次数:29  
标签:calc 1rem rem 屏幕 font 32rem size

css的calc是计算函数,可以通过搜索引擎学习其他的计算思路。

这是该计算函数兼容性。

这里直接开门见山!!

1920设计稿

html {

        font-size: calc(100w / 19.2)

}

在1920设计稿中1rem等于100px,.32rem等于32px

随着屏幕的宽度缩小或放大会变

比如:

div {

        width: 1rem;

        height: 1rem;

        font-size: .32rem;

}

 

-----------------------------------------

 

同样750设计稿

html {

        font-size: calc(100w / 7.5)

}

在750设计稿中1rem等于100px,.32rem等于32px

随着屏幕的宽度缩小或放大会变

比如:

div {

        width: 1rem;

        height: 1rem;

        font-size: .32rem;

}

1rem等于100px这样容易编写。

这样就用不到js去算屏幕宽度计算后给html设置font-size大小,也用不到postcss了吧?

 

发现在safari 游览器中对fontsize设置calc不管用

100/19.2 = 5.2083333vw

100/7.5 = 13.333333vw

于是我直接把得出的数字用vw写死,这样也可以兼容safari游览器了

标签:calc,1rem,rem,屏幕,font,32rem,size
From: https://www.cnblogs.com/miangao/p/17990770

相关文章

  • Premiere Pro 2024:用故事触动人心,让视频更精彩 mac/win版
    PremierePro2024是一款专业的视频剪辑软件,被广泛应用于电影、电视、广告和网络媒体等领域。它能够帮助用户快速高效地将原始素材转化为精美的视频作品,是视频制作人员的必备工具之一。→→↓↓载PremierePromac/win版 在PremierePro2024中,用户可以导入各种视频、音频和......
  • 5-The Untyped Lambda Calculus
    引入在lambda演算中,所有事物都是函数lambda演算式中有三种项:变量x,形如x变量x在另外一个项t1中的抽象abstraction,形如λx.t1将项t1作用于t2,形如t1t2有如下的简单的递归定义来总结上述三种项的形式:t::=x(variable)λx.t(abstrac......
  • 1、读取hudi表问题 readDirect unsupported in RemoteBlockReader
    Causedby:java.lang.UnsupportedOperationException:readDirectunsupportedinRemoteBlockReaderatorg.apache.hadoop.hdfs.RemoteBlockReader.read(RemoteBlockReader.java:492)atorg.apache.hadoop.hdfs.DFSInputStream$ByteBufferStr......
  • dremio random 函数造成dremio crash 问题
    以前没注意使用random,在看社区问题的时候测试了下发现的确有类似的问题,官方的解决方法是通过配置禁用gandiva优化参考配置支持key格式 exec.disabled.gandiva-functions:<function>;<function>参考配置参考禁用处理sabot/kernel/src/main/java......
  • 界面组件DevExpress .NET MAUI中文教程 - 如何优化手机屏幕空间?
    DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpressDashboardeXpressApp框架、适用于VisualStudio的CodeRush等一系列辅助工具。获取DevExpressv23.2正式版下载DevExpress技术交流群9:909157416      欢迎一起进群讨论BottomSheet......
  • FFmpeg屏幕录制(转)
    一、FFmpeg简介    FFmpeg是领先的多媒体框架,能够解码、编码、转码、混合、解密、流媒体、过滤和播放人类和机器创造的几乎所有东西。它支持最晦涩的古老格式,直到最尖端的格式。无论它们是由某个标准委员会、社区还是公司设计的。它还具有高度的便携性。FFmpeg可以......
  • SAP dialog使用选择屏幕+容器展现 步骤+源码
    系统自带的选择都是单选的,但是需求不一定是单选的,那么需要和选择屏幕一样的范围选择要怎么做呢,以下是一个样例,通过查询物料号来展现物料表的数据。9000屏幕创建屏幕设置屏幕类型布局编辑构建一个子屏幕subscreen用于防止选择屏幕,构建一个客制化容器contain用于存放......
  • WebStorm 没有找到本地修改记录LocalChanges,怎么查看本地修改记录
    一直用IDEA做后端Java开发,也写过vue+elementUI的前端代码,但前后端都放在一个项目里写,本地修改代码记录,可以在git-LocalChanges中查看修改记录。 最近前后端分离,自己需要单独用WebStorm写前端项目代码,在git里就找不到本地修改记录了,如下图:File-->Setting-->VersionControl......
  • python requirements.txt的生成和安装
     一、在python代码迁移环境时需要保证各个依赖包版本一致以避免出现一些问题,批量安装依赖包方法如下:1)生成requirement.txt在服务器中切换到项目路径下,执行以下命令:piplist--format=freeze>requirements.txt所生成的requirement.txt中包含依赖包名和版本2)批量安装依赖......
  • remove 移除数据
    //云端代码constdb=uniCloud.database()exports.main=async(event,context)=>{constcollection=db.collection(event.name)constdocList=awaitcollection.where(event.data).get()if(!docList.data||docList.data.length===0){......