首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么流动字体大小不适用于font-size?

流动字体大小不适用于font-size的原因是因为它们是两个不同的概念。

流动字体大小(fluid typography)是一种响应式设计的技术,它允许网页的字体大小根据屏幕尺寸和分辨率的变化而自动调整。通过使用相对单位(如em、rem)和媒体查询,可以实现流动字体大小。这种技术可以提供更好的用户体验,使得网页在不同设备上都能够呈现出合适的字体大小。

而font-size是CSS属性,用于设置元素的字体大小。它可以使用绝对单位(如px、pt)或相对单位(如em、rem)来指定字体大小。font-size属性是固定的,不会根据屏幕尺寸和分辨率的变化而自动调整。

因此,流动字体大小和font-size是两个不同的概念,前者是一种响应式设计技术,后者是CSS属性。在实际开发中,可以根据需要选择使用流动字体大小或者font-size来控制网页的字体大小。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为什么演练测试不适用于微服务测试

演练环境的高风险 在我们深入探讨细节之前,让我们先解决一个关键问题:为什么你应该关心演练环境?答案很简单:它们是你代码和生产环境之间的最后一道防线。...为什么演练环境难以保持稳定?我们正在处理一个经典的“两难境地”: 开发人员需要一个稳定的演练环境来测试他们的代码变更。 将代码变更部署到测试环境的行为可能会使环境对其他人来说变得不稳定。...虽然这可能适用于一个由三个开发人员和一只宠物仓鼠组成的团队,但它无法扩展到更大的团队。这就像在一个整个办公大楼只有一个浴室的情况下——混乱是不可避免的。 2....这种方法类似于生产环境中的金丝雀部署,但应用于演练环境。 主要优势在于开发人员可以共享环境而不会影响彼此的工作。

7110
  • 关联规则算法Apriori algorithm详解以及为什么不适用于所有的推荐系统

    关联规则挖掘最常用于营销,特别是在购物车的上下文中。这个应用领域被正式称为“购物车分析”。 我们这里假设学校建立了一个在线学习的网站,通过学生将课程添加到课程列表(虚拟购物车)来评估不同的课程。...但是关联规则不受因变量个数的限制,能够在大型数据库中发现数据之间的关联关系,所以其应用非常广泛,但是他是否可以应用于所有系统呢?Apriori并不是适用于所有类型的数据集。...Apriori algorithm为什么不适用于某些产品 下面我们使用一个电子商务平台的事件数据【查看,添加到购物车,购买】,包括所有的电子品牌。其目的是确定影响购买几种产品的不常见规则。...这是为什么呢? Apriori算法不适用于所有类型的数据集,它适用于产品很多,并且有很大可能同时购买多种产品的地方,例如,在杂货店或运动器材商店或百货商店等。

    1.3K20

    静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。...通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。...流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少);响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC,平板,手机等设备之间较大的分辨率差异)。...,因为浏览器默认字体大小16px*62.5%=10px。...那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢?

    10.6K33

    rem适配移动端的原理及应用场景

    2.1、em em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小——MDN 比如父元素font-size:12px; 自身元素如果写成:font-sise...:2em;则自身元素用px表示就是24px(相对父元素字体大小); 但是自身元素设置:width:2rem,那么自身元素用px表示就是48px(相对自身字体大小); 2.2、rem rem作用于非根元素时...,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小——MDN 比如根元素(html)设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px...; 如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小,一般是12px; 2.3、vm/vh vw :视口宽度的 1/100;vh :视口高度的 1/100 —— MDN...: 641px) { body {font-size: 20px} } div {font-size: 1.2em} 在制作H5的页面中,rem并不适合用到段落文本上。

    1.6K20

    Rem布局的原理解析

    em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小——MDN 我在面试时经常问会一道和em有关的题,来看一下面试者对css细节的了解程度,如下,问s1...rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小——MDN rem取值分为两种情况,设置在根元素时和非根元素时,举个例子: /* 作用于根元素,相对于原始大小...(16px),所以html的font-size为32px*/ html {font-size: 2rem} /* 作用于非根元素,相对于根元素字体大小,所以为64px */ p {font-size:...2rem} rem有rem的优点,em有em的优点,尺有所短,寸有所长,我一直不觉得技术没有什么对错,只有适合不适合,有对错的是使用技术的人,杰出与优秀的区别就在于能否选择合适的技术,并让其发挥优势。...rem,字体的大小和字体宽度,并不成线性关系,所以字体大小不能使用rem;由于设置了根元素字体的大小,会影响所有没有设置字体大小的元素,因为字体大小是会继承的,难道要每个元素都显示设置字体大小???

    1.2K20

    论CSS中可使用的font-size的长度单位

    CSS给开发者提供了许多种长度单位,用于各种不同的CSS属性,如 margin, padding, line-height还有 font-size。为了满足不同的需求,我们有了各种各样的长度单位。...div { font-size: 20px; } code { font-size: 18px; } p, a { font-size: 22px; } 参见 CodePen上 使用像素设置字体大小...容器 div的 font-size设置为rem,避免了字体大小的继承关系。 正如本例那样,你可以使用这个这个单位,给某个不同模块设置对应的 font-size。...参加CodePen上的使用视窗单位设置字体大小的例子。(By@SitePoint)。 使用视窗单位的问题就是计算出的 font-size可能会让字体不适合阅读,字体有可能非常小或者非常大。...使用关键字来设置字体大小 另一个选择是使用关键字设置 font-size。有两种类型的关键字:绝对和相对的。绝对值关键字常用在指定字体大小,其值是根据不同的用户浏览器计算出的一个数据表里的某项。

    2.4K20

    如何决定响应式网站的 CSS 单位?

    - 根 em 相对于查看端口/文档 vw vh vmax vmin 在这里学习最常见的单位 px 单位 绝对像素单位仅用于屏幕(界面),其余单位用于打印。...px 单位不是一个好的选择,实际上这不是用于缩放。无论您选择什么屏幕尺寸,px 单位的尺寸都是固定的。这就是为什么边框总是首选 px 单位的原因,因为边框在所有屏幕尺寸上也保持固定。...h1{ font-size: 1em; /* now 1em == 16px */ } 效果 .container{ font-size: 48px; /* 或 3em,因为默认字体大小是...16px & 它的父元素是 body,所以 3*16px 就是 48px */ } h1{ font-size: 1em; /* now 1em == 48px */ } 效果 我们可以将这个单位用于边距和填充...概括总结 px单位常用于边框。 % 单位相对于相对父级的宽度。 em 单位相对于元素字体大小的边距和填充 。 rem 单位相对于根的字体大小

    98310

    响应式网站应该如何选择 CSS 单位?

    相对于查看端口/文档 下面是一些最常见的单位: px 绝对像素单位仅用于屏幕(界面),其余单位用于打印。...这就是为什么边框总是首选 px 单位的原因,因为边框在所有屏幕尺寸上也保持固定。 百分比 用于设置元素的宽度时,它总是相对于其直接父元素的大小。...em em 总是相对于它的直接父级的字体大小。1em == 父字体大小的大小。如果没有覆盖,默认字体大小为 16px,假设在父元素中字体大小为 48px,然后在子元素中为 1em == 48px。...* now 1em == 48px */ } 我们可以将这个单元用于边距和填充,因为它可以让我们根据元素的字体大小在框周围使用灵活的间距。...因此,元素 font-size 会根据设备大小而变化,元素周围的间距也将分别发生变化。 rem r 代表根 em,与 em 不同,它总是相对于根字体大小,无论它的下一个父元素具有什么字体大小

    1.9K10

    Rem布局的原理探究

    rem是css3引入的一个单位,那我们为什么要在有em这个可以充当弹性布局的单位时还要引入rem呢? em可以让我们的页面更灵活,比起到处写死的px值,em显得更有张力,根据比例的变化来调节屏幕。...所以针对这种繁琐运算的情况,rem应运而生,我们是这样定义rem的: rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小 rem的取值有两种情况,就是设置根元素和非根元素的时候...,下面看个例子: html { font-size: 2rem; } html是我们html页面的根元素,之前介绍em的时候,我们就知道浏览器默认渲染的字体大小是16px,所以html的字体大小是...2rem,那么rem作用于根元素的字体大小相当于其初始字体大小的定论的话,html的字体大小就是32px。...p { font-size: 2rem; } 而上面p标签的这个例子中,我们之前已经知道html的字体大小是32px,那么p标签的字体大小就是2 * 32px = 64px。

    1.6K30

    全栈之前端 | 8.CSS3基础知识之文本样式学习

    font-style:设置字体样式 font-family: 设置文本字体 font-size:设置字体大小 font-weight:设置字体的粗细程度 font-variant: 设置可变字体 #...# sideways-rl :对于左对齐(ltr)文本,内容从下到上垂直流动,对于右对齐(rtl)文本,内容从上到下垂直流动。...# sideways-lr :对于左对齐(ltr)文本,内容从上到下垂直流动。对于右对齐(rtl)文本,内容从下到上垂直流动。...font-size 属性 - 设置字体大小 描述: 此属性用于设置字体大小, 更改字体大小还会更新字体大小相关的 单位,例如 em、ex 等。...*/ font-size: smaller; font-size: larger; /* 值:相对于字体的单位(例如 em 和 ex),字体大小相对于父元素的字体大小

    34420

    响应式设计笔记

    本例中,样式会应用于所有的投影仪。 可以在CSS样式表中使用媒体查询。...你可能也会疑惑,为什么不将这些小数四舍五入?但支持者们认为,这样做可以提供更加精确的结果。为浏览器提供更加精确的结果可以使其显示效果更加精准。...em的实际大小是相对于其上下文的字体大小而言的。如果我们给标签设置文字大小为100%,给其他文字都使用相对单位em,那这些文字都会受body上的初始声明的影响。...: 1.1em; }  }  根据视口宽度来改变文字大小,这是媒体查询和流动布局和谐共存的又一证据:媒体查询约束流动布局的变动范围,而流动布局则简化了从一组媒体查询样式过渡到另一组的改变过程。...三、Modernizr Modernizr是一个用于检测浏览器功能的开源JS库。

    1.1K20

    不同大小的文字底部对齐,为什么不能使用flex-end

    flex容器下,不同大小的文字底部对齐,为什么应该使用 baseline 而不是 flex-end?...分析原因发现,是因为文字周围有一圈空白的边距,这个边距在字体大小不同的情况下是不一致的,所以矩形区域虽然对齐了,但是文字底部没有对齐。...从 line-height 的角度解决为什么你不应该使用 line-height: 1首先想到的就是把文字周围的边距给彻底去掉,也即设置 line-height: 1,那么为什么说不应该使用这种方式呢?...图片使用 line-height 的正确方法在完全去掉周围边距这种方法不可用的情况下,只能通过把不同字体大小的透明边距宽度设置为一致就可以了。...: 26px">大字体 小字体运行效果:个人理解,前面比较经常用的一些属性值主要是用于盒子的对齐

    1K40

    移动端页面的自适应rem

    rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下 emem作为font-size的单位时,其代表父元素的字体大小...,em作为其他属性单位时,代表自身字体大小——MDN em做弹性布局的缺点还在于牵一发而动全身,一旦某个节点的字体大小发生变化,那么其后代元素都得重新计算 rem作用于非根元素时,相对于根元素字体大小...;rem作用于根元素字体大小时,相对于其出初始字体大小——MDN rem取值分为两种情况,设置在根元素时和非根元素时,举个例子 /* 作用于根元素,相对于原始大小(16px),所以html的font-size...为32px*/html {font-size: 2rem}/* 作用于非根元素,相对于根元素字体大小,所以为64px */p {font-size: 2rem} 三、Rem布局原理 如果子元素设置rem...单位的属性,通过更改html元素的字体大小,就可以让子元素实际大小发生变化 html {font-size: 16px}p {width: 2rem} /* 32px*/html {font-size:

    2.4K20

    响应式布局,你需要知道这些

    文中讲到响应式的概念源自响应式建筑设计,即房间或者空间会根据其内部人群数量和流动而变化。...最近一门新兴的学科“响应式建筑(responsive architecture)”开始在探讨物理空间根据流动于其中的人进行响应的方法。...为什么我们不使用设备像素呢? 设备像素对应屏幕上的光点,如今的屏幕分辨率已经达到人眼无法区分单个像素的程度了。...如果元素没有设置 font-size,会继承父元素的 font-size,如果父元素也没有,会沿着 DOM 树一直向上查找,直到根元素 html,根元素的默认字体大小为 16px。...所以它的计算规则比较简单, 1 rem 就等于根元素 html 的字体大小, html { font-size: 14px; } p { font-size: 1rem; /* 1rem =

    1.7K20

    简单粗暴的移动端适配方案 - REM

    通过媒体查询根据不同的屏幕分辨率来进行适配,响应式的问题在于: 屏幕分辨率分区间:区间内无法进行区分,无法实现100%兼容,一般是用主流分辨率来进行划分; 额外的工作量:响应式布局的工作都是需要开发者去实现的,带来了额外的开放量; 不适合功能复杂的页面...:响应式一般适合用于资讯类页面,功能复杂的网站对于页面的整体排版和样式要求较高(特别是对比PC和H5); 对比三种做法我们会发现只有响应式布局可以解决我们的问题,但是又给我们带来了额外的复杂度和维护难度...换句话说,当我们指定一个元素的font-size为2rem的时候,也就说这个元素的字体大小为根元素字体大小的两倍,如果html的font-size为12px,那么这个2rem的元素font-size...对比em和rem: 单位 定义 特点 em font size of the root element 以根元素字体大小为基准 rem font size of the element 以父元素字体大小为基准...3.2 媒体查询 既然只是为了根据屏幕宽度来设置元素的字体大小,那我们完全也可以通过css3媒体查询来完成这部分工作。

    2K101
    领券