将根元素字体大小设置为百分比时，在Chrome中使用rem的文本区域的意外字体大小 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

rem与em详解

.png 你需要知道的: 根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。...如果用户让他们的浏览器默认字体大小为 16px，那么根元素字体大小将为 16px。在 Chrome 开发工具下，你可以在已计算选项卡下看到一个元素继承的属性。...1555350286371-a7064520-4031-4268-90b0-7ced69d6d091.png 浏览器将调整使用 em 单位的 HTML 元素字体大小 当 em 单位设置在 html 元素上时...然而，大多数 web 设计中的元素往往不会有这种类型的要求，所以一般使用 rem 单位的字体大小，em 单位只在特殊的情况下使用。...使用 em 单位应根据组件的字体大小而不是根元素的字体大小。在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。

4.2K3 0

08-移动端开发教程-移动端适配方案

常见的适配方案 百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置字体水平百分比布局水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变...Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设备动态适配缩放开发直接按照设计稿编写固定尺寸元素...百分比与固定高度布局方案此方案的前提是设置屏幕为理想视口，然后通过水平百分比布局或者弹性布局，垂直方向一般用固定像素。优点：布局快速简单方便、在移动设备中水平表现良好差异不大。...3. rem布局方式 rem是css3中新增加的长度单位，之前我们接触过em单位，em表示1em代表1个字体的宽度。而rem是根元素字体的大小，在网页中也就是设置的html根元素的字体大小。...：根据CSS的媒体查询设备的屏幕的宽度，根据宽度的大小设置密集的html根元素的字体大小。

3K6 0

您找到你想要的搜索结果了吗？

是的

没有找到

问题小记

line-heiht line-height有5个值 normal 　　浏览器默认属性值为纯数值1.2（不同浏览器或有差异）　　 inherit 　　继承父元素的值，默认值　　 百分比值　　如果一个元素的...hack方法：为链接设置position: relative 或者设置background: #fff，在将背景设置透明 ## 移动端 * active伪类在PC端的作用为鼠标点击到放开时给元素添加样式用...单行文本的垂直居中，line-height = height 多行文本的高度固定居中, display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上...em的值不固定，会继承父级元素的字体大小 避免字体大小被重复计算，也就是1.2 * 1.2= 1.44的现象 rem：始终是基于根元素，是目前比较好的解决方法。...缺点是需要为子元素依次设置字体大小，低版本chrome不支持设置font-size：0; 需要加上 -webkit-text-size-adjust：none 私有属性来支持设置。

6661 0

08-移动端开发教程-移动端适配方案

常见的适配方案 百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置字体水平百分比布局水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem...的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设备动态适配缩放开发直接按照设计稿编写固定尺寸元素...百分比与固定高度布局方案此方案的前提是设置屏幕为理想视口，然后通过水平百分比布局或者弹性布局，垂直方向一般用固定像素。优点：布局快速简单方便、在移动设备中水平表现良好差异不大。...3. rem布局方式 rem是css3中新增加的长度单位，之前我们接触过em单位，em表示1em代表1个字体的宽度。而rem是根元素字体的大小，在网页中也就是设置的html根元素的字体大小。...：根据CSS的媒体查询设备的屏幕的宽度，根据宽度的大小设置密集的html根元素的字体大小。

3.5K10 0

CSS：绝对单位、相对单位

% %（百分比）应该是我们最好理解的单位了，这里就不多解释了，主要有一点需要注意：如果对 html 元素设置 font-size 为百分比值，则是以浏览器默认的字体大小16px为参照计算的（所有浏览器的默认字体大小都为...如果父元素没有设置字体大小，则继续往父级元素查找，直到有设置大小的，如果都没有设置大小，则使用浏览器默认的字体大小。...同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。.../* 0.1rem = 0.1 * 100px(根元素的font-size) */ } 如果我们改变了 html 的 font-size 值，如设置为 80px，则相应的我们的 div 的 width...单位运算除了设置以上的单位之外，我们还可以使用 calc 来进行单位运算，单位运算时可以使用各种单位进行加减乘除运算。

2K2 0

移动端适配大法

，比如文字块 百分比在PC端自适应上也经常用到，着实相当好用，但它一般用于宽度自适应的设置，高度设置百分比时，要求其父类元素有明确高度。...二、rem 使用场景：对于图片等对高度自适应有要求的场景 rem单位：以页面根字体的大小，也就是html元素字体的大小为基准，例如 html{ font-size:16px; } 那么1rem...所以使用时，我们只要让根字体大小随屏幕大小自适应，那页面中所有使用rem单位来设置宽高的元素，大小也会随屏幕大小自适应了。...因此使用这种方法时，应将JS代码放入head头部中并且在CSS引入之前。...b) 由于chrome的最小字体是12px，又为了计算方便，所以可以设置1rem的大小为20px 应用过程中，比如我们拿到了一个750的设计稿，那么首先，将设计稿里的数值除以2，得到按手机屏幕大小布局的数值

2.7K2 0

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

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。...1、rem,em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。...2、使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。...4、浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点...工具ViewtoREM：PX转换到REM（自动预处理） rem的定义：font size of the root element，rem是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值

10K3 3

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

:2em;则自身元素用px表示就是24px（相对父元素字体大小）; 但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）； 2.2、rem rem作用于非根元素时...，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN 比如根元素（html）设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px...字体并不合适使用rem, 字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小...我们可以在body上做字体修正，比如把body字体大小设置为16px，但如果用户自己设置了更大的字体，此时用户的设置将失效，比如合理的方式是，将其设置为用户的默认字体大小: html {fons-size...所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

1.5K2 0

一文读懂 CSS 单位

根据CSS的规定，1em 等于元素的font-size属性的值。 em 是相对于父元素的字体大小进行计算的。如果当前对行内文本的字体尺寸未进行显示设置，则相对于浏览器的默认字体尺寸。...所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。 rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。...，边框的长度变成了25px，它是根据根元素html的字体大小计算的： image.png 如果没有对根元素设定字号的话，font-size: 1rem的作用与font-size: initial相同。...设置缩放时，应该使用 rem；使用 em 应该根据组件的font-size来定，而不是根元素的font-size来定； rem 可以从浏览器字体设置中继承 font-size 值， em 可能受任何继承过来的父元素...（2）文本中的百分比 在CSS中文本控制的属性有font-size、line-height 、vertical-align、 text-indent等。

6511 0

如何完成响应式布局，有几种方法？看这个就够了

缺点计算困难需要计算相对应的百分比值，最主要的是百分比往往只用于设置狂高，在设置其他元素时，根据的对象百分比不同，比如我们在设置内外边距的时候，是根据父级的宽度设置的，更有像border-radius...缺点没特别大的缺点。 em/rem 使用方法 em设置字体是根据父级字体的大小设置倍数，rem设置字体是根据固定的根元素字体大小设置倍数。...什么意思呢比如父元素为2em（32px），子元素又设置了字体大小为1em（16px），子元素边距设置成1em 边距就是16px，子元素如果设置成20px，子元素边距1em，就是20px，他是根据最近的设置的字体大小为依据的...rem在这里就不做演示了他是根据根元素html设置的字体大小 为倍率进行显示，边距同样也是根据根元素大小进行显示，这一点rem要好很多，rem的使用体验要比em好很多，因为他们都有一个统一的倍率，不用单独计算...的元素都是根据根元素的字体大小改变的，想要完成响应式布局，我们只需要让根元素字体大小变成响应式跟随窗口大小的改变就好。

1.1K3 0

CSS 中的各种单位

之前遇到 css 中需要使用单位的情况，都草草用 px 或者百分比糊弄过去，导致当需要做一个响应式的页面的时候，要重新补一下 css 单位的技术债。...em rem em 指的是相对于当前对象内文本的字体大小，比如设置 body 的字体大小(font-size)为 14px，而对 body 内所有的 div 设置字体大小为 1.5em，那么 div 内字体大小就是...rem (roo em) 应运而生，rem 是指相对于根节点字体大小，通常根节点是指 html 元素。...百分比 css 中的百分比是一种相对值，使用百分比的关键是找到它的参照物。属性参照 width & height 宽和高在使用百分比值时，其参照一般都是父元素的 content 的宽和高。...border-radius 为一个元素的border-radius定义的百分比值，参照物是这个元素自身的尺寸。

7532 0

移动端适配之终极适配方案rem适配

简单介绍一下这个rem适配 px 固定值,设置多少就是多少不随屏幕大小改变 em 相对于自身字体大小 font-size:12px; 1em=12px em引发问题 1.chrome浏览器下规定字体最小...12px 2.如果两个元素的字体规格不一样就是分别就行设置,不方便设置 rem:css3新增的相对单位,相对于根节点(html)字体设置 html{ font-size:12px; } 1rem...=12px,5rem=60px; 首先要去设置这个html(根节点的字体大小),rem是根据这个根节点的字体大小进行适配!...16怎么而来的,这个16是任意设置的,设置16是一iphone5为例,独立设备像素的320为例,每一小份是20px,则在ip5下,根节点1rem=20px 那么这个px转rem怎么进行转换可以使用...下,1/16代表20px,那么在less文件中的声明的rem变量就为20rem(代码需要设置的像素/这个20px),width:180/@rem,在iphone6下显示为宽度180px,则自动换算对于rem

1.6K2 0

pt、rpx、px、em、rem、%、vh、vw的区别

px通常用于精确控制图像的大小和布局，特别是在需要保持一致性的设计中。2. em：em是相对单位，其值是相对于元素的父元素的字体大小而言。...em常用于调整文本大小、行高和间距，特别是在需要嵌套元素的情况下，可以实现相对尺寸。3. rem：rem也是相对单位，但是相对于文档根元素的字体大小。...根元素通常是HTML文档的标签，它的字体大小可以在CSS中设置。rem非常适合响应式设计，因为它不会受到嵌套元素的影响。...如果根元素的字体大小为16px，1rem始终等于16px，无论元素嵌套多深。4. %（百分比）：百分比单位是相对于父元素的值来计算。例如，如果一个元素的宽度设置为50%，它将占据其父元素宽度的一半。...在Web设计中，pt不常用，因为Web页面通常以屏幕为基础，而不是印刷媒体。使用pt可能会导致不一致性，因为不同设备和浏览器的像素密度不同。

6603 0

为什么你永远不应该在CSS中使用px来设置字体大小

在排版上，一个 em 等于当前字体大小。如果你将字体大小设置为 32pt（“pt”是另一个仍然有时使用的旧排版术语），那么 1em 就是32pt。...EM 和 REM 之间的区别为了区分这两者： 1rem 始终等于浏览器的字体大小，或者更准确地说是 html 元素的字体大小。 rem 代表“根em”，而网页的根是标签。...因为边框宽度和边距都是在 px 中设置的，它们保持不变，不会缩放。但是请注意，如果将CSS中的 px 更改为相应的 rem 值，会发现线条和间距确实变大了！...如果用户设置了非常大的字体大小，则可能不是这种情况，将媒体查询设置为 rem 而不是 px 可以帮助我们避免这种假设并响应用户的偏好。我在这个网站上遇到了这个问题；我把所有的断点都设置在 px 上。...在那之后，我立即改为 rem ，问题得到了解决。简而言之：在媒体查询中，除非您确定自己知道在浏览器中设置自己的字体大小会对用户产生什么影响，否则一定要避免使用 px 。

1.6K2 0

CSS基础-属性值单位：px, em, rem, %

常见问题与避免问题：嵌套使用em容易导致计算复杂，难以预测最终尺寸。避免：尽量在靠近根元素的地方设置em值，减少嵌套层数，或者使用rem单位替代。...常见问题与避免问题：忽略设置根元素的字体大小，导致rem单位失去意义。避免：始终在CSS初始化中明确设置html的字体大小，以便于控制整个页面的缩放比例。.../* 示例：设置html字体大小为16px，段落字体大小为1rem */ html { font-size: 16px; } p { font-size: 1rem; /* 相当于16px...百分比（%）概述 百分比单位基于其包含块（父元素）的相应尺寸计算得出。它广泛应用于创建流体布局，特别是在响应式设计中，可以随着窗口大小的变化而自动调整元素尺寸。...常见问题与避免问题：百分比值可能导致布局不稳定，尤其是在复杂的嵌套结构中。避免：谨慎使用百分比，特别是在高度和外边距上，因为它们的计算方式可能不如宽度直观。

961 0

CSS REM - 什么是 REM？

我们为什么需要考虑使用 REM 单位呢？我们为什么要使用 REM？在 CSS 中，有两种 CSS 长度值：绝对长度值和相对长度值。...当你使用这些长度的时，你可以确定它们的大小始终大致相同。当你知道确切的尺寸的时候，这很有用。但是，不要忘记了，人们可能使用不同的浏览器设置，无论是基于喜好还是访问性需求的原因。...该根元素可以是 :root 伪类选择器或者 html 标签选择器。在 HTML MDN 文档中，:root 就是代指 html 根节点。...} 为 font-size 使用 REM（或者其他相对长度）对于可访问性来说是必须的，因为当浏览器设置更改时，某些浏览器中的 px 不会调整大小。...例如，一些视力障碍人员可能需要缩放到 400% 才能看到你的文本。使用 REM 可以确保你的文本满足这些需求，因为字体大小是相对于用户选择的默认字体大小定义的（而不是浏览器默认的字体大小）。

6811 0

1.CSS单位-CSS进阶

（1）常见的相对单位相对单位说明 px 像素 % 百分比 em 1em等于当前元素字体大小 rem 1rem等于根元素字体大小 （2）px 全称pixel，像素，指的是一张图片中最小的点，或计算机屏幕中最小的点...百分比单位例.png （4）em 在CSS中，em是相对于当前元素的字体大小而言。其中，1em等于当前元素字体大小。此处的字体大小指的是以px为单位的font-size值。...简单来讲，对于任何元素我们都不需设置font-size为多少px，二世继承根元素的font-size值16px，然后再使用em换算即可。...使用em作为统一单位例2.png 在CSS中，em是相对于当前元素的字体大小而言。...① rem和em区别 em是相对“ 当前元素 ”的字体大小。 rem是相对“ 根元素 ”的字体大小。这里的font-size指的都是以px为单位的font-size值。 ② 示例 Ⅰ.例1 <!

5122 1

【面试题】CSS知识点整理(附答案)

图片来源网络伪元素伪元素用于创建不在文档树中的元素，并为其添加样式，比如说，我们可以通过：before来在一个元素前添加一些文本，并为这些文本添加样式。...实现固定宽高比(width: height = 4: 3 )的div，怎么设置利用css中 padding百分比的计算方法：padding设置为百分比，是以元素的宽度乘以100%从而得到的padding...如果字体大小是16px（浏览器的默认值），那么 1em = 16px rem rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，不会像em那样，依赖于父元素的字体大小，...” 和 “/”四则运算；可以使用百分比、px、em、rem等单位；可以混合使用各种单位进行计算；表达式中有“+”和“-”时，其前后必须要有空格，如"width: calc(12%+5em)"这种没有空格的写法是错误的...// 设置根元素字体大小。

1.5K4 0

CSS3 基础知识

在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以...1. em的值并不是固定的； 2. em会继承父级元素的字体大小。 rem:使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。...1. em的值并不是固定的； 2. em会继承父级元素的字体大小。 rem:使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

1.8K6 0

H5页面适配及微信默认字号问题的最佳实践

em 是相对单位，基准为父节点字体大小，若自身定义了 font-size 则按自身计算，不推荐使用 rem 是相对单位，css3新加，按照根节点的字号作为基准，下方提供的设置根节点...62.5% 的方案并不推荐，具体实践见第二节的介绍 /* 根节点字体大小设置为 62.5%，即 10px 可以方便计算，否则将以浏览器默认字号 16px 为基准 */ /* 10 ÷ 16 × 100%...= 62.5% */ /* 但 chrome 最小的字体大小为 12px，因此浏览器中的字体均 >= 1.2rem */ html { font-size: 62.5%; } body { font-size...，按照视窗的宽高的百分比进行计算，和 css 中的 % 按照父元素的宽高作为计算基准的方式不同 vmin / vmax 取视窗宽高二者中较小 / 大值的百分比进行计算 /* 元素始终在屏幕上可见 *...，对于 position: fixed; 的元素是相对于可视窗口，并且当父元素没有指定高度时，子元素设置百分比没有效果，高度直接为子元素的实际高度 vm css3 新单位，相对于视窗宽高较小的那个的百分比

3K14 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭