CSS3 calc rem [css的计算器]

750px下的响应式字体设置
最新推荐文章于 2022-07-19 17:18:05 发布
原创 最新推荐文章于 2022-07-19 17:18:05 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS

本文介绍了一种在750px宽度屏幕下的响应式布局技巧，通过使用CSS的视窗单位vw和calc函数，实现字体大小随屏幕宽度变化而变化的效果。具体实现为：当屏幕宽度为750px时，设定html根元素的字体大小为100px，即1rem等于100px。

在750px下

html{font-size: calc(100vw/7.5);}

100vw=750px–>font-size:750px/7.5 -->100px–>1rem

绝对干货！纯用HTML+CSS+JS 编写的计算器应用
BOM485480的博客
05-13 819
一道笔试题 之前偶然看到一个公司的笔试题，题目如下： 用HTML5、CSS3、JavaScript，做一个网页，实现如下图形式计算器 具体要求： 有且只有一个文件：index.html。不允许再有其他文件，不允许再有单独的CSS、JS、PNG、JPG文件。 运行环境为 Google Chrome。 必须支持标准的四则运算。例如：1+2*3=7。 请在收到邮件的48小时内独立完成本测试，并回复本邮件。 一道笔试题引发的一个练手项目 花了一段时间写好的第一版，符合了笔试题的要求。后来左看右看觉得还可以改进做的
【高频考点精讲】CSS 中的 calc() 函数及其在布局中的应用
最新发布
全栈老李的博客
06-01 918
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们聊聊CSS中那个看似简单实则强大的calc()函数。这玩意儿就像数学课上的计算器，但放在CSS里却能解决不少布局难题。记得我刚入行那会儿，遇到个需求：要让一个元素宽度占满父容器，但要留出20px的边距。当时傻乎乎地写了，结果浏览器直接给我甩脸子——这语法压根不认啊！后来才知道，原来CSS早就准备好了calc()这个神器。
关于使用rem单位、css函数calc()进行自适应布局
weixin_34203832的博客
07-24 285
一、关于css中的单位 　　大家都知道在css中的单位，一般都包括有px,%,em等单位，另外css3新增加一个单位rem。 　　其中px，%等单位平时在传统布局当中使用的比较频繁，大家也比较熟悉，不过px单位在进行自适应布局的过程当中则会有些力不从心，大部分的解决方案是使用%为单位配合@media媒介查询来进行自适应布局。 　　不过还有另外一个css3新添加的单位也同样可以拿来进行自适应布局，在...
理解 css rem与动态计算rem
qq_36668399的博客
07-19 2179
理解 css rem与动态计算rem
css+ vw&rem 自适应布局
qq_26239917的博客
09-20 575
对于 ipone6 100vw = 750px 1px = 100vw/750 100px= 10000vw/750 =100vw/7.5 html:font-size->1rem->100vw/7.5=100px 在750尺寸下布局完成，在其他尺寸自适应 举例子 在375 按道理rem应该等于50px 就可以等比缩放 看看这个式子在375下是否是50px 100vw/7.5=375p...
css3媒体查询详细介绍和移动端项目准备工作前端小白必备哦！！！
chenyuXYT的博客
04-15 341
文章目录媒体查询语法设备类型(默认值为all)关键字常见适配范围移动端项目准备工作meta标签的设置重点设置分辨率，PPi,DPI,DPR,物理像素，逻辑像素区别常见单位 媒体查询 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 he...
css 响应式布局
石头的专栏
08-05 200
html{ font-size: calc(100vw/50); } .robot-index-head, .robot-index-main .robot-index-footer { height: 4rem; width: 100%; } .robot-index-head { line-height: 4rem; } .robot-index-head img { ...
爱上朴实的CSS细节虽不起眼可提高效率
09-22
CSS的另一个高效工具是calc()函数，它允许开发者在声明属性时执行简单的数学运算。这在处理混合单位时特别有用，例如在响应式布局中设置元素的宽度或边距。使用calc()，我们可以直接在CSS中计算出动态的宽度或间距，...
“数万行代码“教你用html和css编写一个精美的网页
歌谣的博客
05-15 1万+
我是歌谣 放弃很容易 但是坚持一定很酷 1前言 作为一名前端开发工程师 开发一个完美的网页也是我们的必修课之一 逻辑写起来有时候不是那么的难 据说页面样式才是最难的一课 本文内容纯属自己个人观点 欢迎一起交流吐槽 2网页基础版（div+css） 我第一次接触前端页面的时候做的网页就是一个div+css的布局 因为当时是在实习 网页的内容现在已经丢失 类似一个商品管理的页面 页面分出来给一个班的同学 几个人分为一个小组 进行共同开发 页面的跳转直接a标签进行跳转即可 2.1.1..
calc
03-08
通过这些文件，你可以学习如何使用calc()来动态计算元素的大小，如何处理相对单位（如em和rem），以及如何与其他CSS属性（如margin和padding）配合使用。此外，你还可以了解在不同浏览器之间的兼容性问题，因为尽管...
css3vw适配_4种移动端适配方法
weixin_39557583的博客
01-14 575
1.@media screen实现网页布局的自适应优点 : 无需插件,能够适应各种窗口大小，只需在CSS中添加@media screen属性。官方文档：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。语法：@media mediatype and|not|only (media feature) { CSS-Code; }/* ...
calc计算，移动端布局
weixin_30471561的博客
09-09 336
在做移动端页面布局的时候，需要做到响应式，也就是文字会随着页面的大小改变以后文字的大小和div的宽高等比例跟着改变。 rem 单位 是相对于html的font-size的来的，所以用rem单位就可以实现。 我们只要把HTML的font-size设置自适应，其他的单位用ren以后自然就能实现。 vw 单位 是视口的单位 <meta name="viewport" content="initia...
CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动
macleer的博客
07-22 5278
很简单，只要一行代码就搞定了： .wrap-outer { margin-left: calc(100vw - 100%); } 或者： .wrap-outer { padding-left: calc(100vw - 100%); } 然后就可以庆祝放鞭炮啦！！ 首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实
【CSS笔记】— 使用calc()计算宽高（vw/vh）
weixin_34148508的博客
12-18 1338
【CSS笔记】— 使用calc()计算宽高（vw/vh） calc()是什么？ 简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算， 使用“+”、“-”、“*” 和 “/”四则运算； 可以使...
目前用到最完美的rem解决方案calc方法
热门推荐
slongzhang的博客
02-02 8万+
/*全屏7.5rem*/ @charset "UTF-8"; *{ margin: 0;padding: 0; } html, body { min-height: 100%; } html { font-size: calc(100vw/7.5); font-size: -webkit-calc(100vw/7.5); -webkit-text-size-adjust: 100%; } ...
处理移动端自适应布局的方法- calc()与vw
weixin_30302609的博客
07-28 288
　　在处理移动端自适应布局时，目前前端最流行的方法应该就是使用媒体查询，来设置HTML的字体大小，然后用rem为单位对Dom的宽高进行设置，这个方法的优势在于兼容性方面很好，劣势则在于当前市场上不同的机型太多，尺寸种类比较杂，所以要想做到所以尺寸机型都能适应，工作量相对比较大。目前也有人会选择用百分比进行布局，这个布局方法在仅仅处理元素的宽高上面非常好用，但是当js中要对dom元素的尺...
css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
飘过的春风
10-13 5万+
“无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。” 我们想要实现页面自适应布局时，通常因为margin的存在，而比较麻烦；有时候想要实现宽度自适应的输入框时，也因为padding或margin的存在，而相当繁琐，同时由于浏览器兼容性而导致最终效果不一致。css3新添加属...
CSS布局技巧一【使用vw定制rem自适应布局、使用:nth-child()选择指定元素、使用writing-mode排版竖文、使用text-align-last对齐、使用:not()去除无用属性】
weixin_43837268的博客
09-08 573
使用vw定制rem自适应布局 要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制 场景：rem页面布局(不兼容低版本移动端系统) 兼容：vw、calc() /* 基于UI width=750px DPR=2的页面 */ html { font-size: calc(100vw / 7.5); } 使用:nth...
css3中rem详解
物以稀为贵yeah
06-15 1831
rem是css3新增的一个属性，它是一个相对单位，直观上可以说：是相对于html元素字体大小的单位。兼容性：大多数浏览器都支持，除了IE8以下不支持，但rem一般多用于移动端页面。 优点：在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算。 1、针对设计稿计算rem 所有浏览器都一致默认保持着 16px 的默认字号，rem与px关系为
纯CSS3制作简易计算器代码示例
标题中的“纯css3加减乘除计算器代码”表明该代码利用纯CSS3技术实现了一个基本的数学运算计算器，这涉及到CSS3的多种样式和伪类的使用，比如:hover、:checked等，以及CSS3中的过渡效果（transition）和变形...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值