em html字号,使用 em 来设置字体大小

如果要避免在 网络 Explorer 中无法调解排遣文本的问题,许多启迪者运用 em 单元庖代 pixels。

W3C 引荐使用 em 尺寸单元。

1em 就是今朝的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对付该元素,1em 就就是 16 像素。在设置字体大小时,em 的值会相对于付父元素的字体大小窜改。

阅读器中默许的文本大小是 16 像素。因而 1em 的默许尺寸是 16 像素。

可能应用下面这个公式将像素转换为 em:pixels/16=em

(注:16 就是父元素的默认字体大小,假如父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)

实例

h1 {font-size:3.75em;} /* 60px/16=3.75em */

h2 {font-size:2.5em;} /* 40px/16=2.5em */

p {font-size:0.875em;} /* 14px/16=0.875em */

切身试一试

在下面的例子中,以 em 为单元的文本大小与前一个例子中以像素计的文本是近似的。不过,如果运用 em 单位,则或许在所有阅读器中调解排遣文本大小。

可怜的是,在 IE 中仍具备题目。在重设文本大小时,会比畸形的尺寸更大或更小。

连络应用百分比和 EM

在悉数浏览器中均无效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:

实例

body {font-size:100%;}

h1 {font-size:3.75em;}

h2 {font-size:2.5em;}

p {font-size:0.875em;}

切身试一试

咱们的代码尤其有用。在所有阅读器中,大要展示沟通的文本大小,并许可所有浏览器缩放文本的大小。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在CSS中实现字号自适应的方式有多种,其中比较常见的有以下几种: 1. 使用相对单位使用相对单位(如em、rem、vw等)来设置字体大小,可以根据浏览器窗口大小自动调整字体大小。例如: ``` body { font-size: 16px; } h1 { font-size: 2em; /* 相当于32px */ } p { font-size: 1.2em; /* 相当于19.2px */ } @media screen and (max-width: 768px) { body { font-size: 14px; } } ``` 上面的代码中,使用em单位设置字体大小h1元素字体大小为父元素字体大小的2倍,p元素字体大小为父元素字体大小的1.2倍。同时,使用@media查询来在不同的屏幕尺寸下设置不同的字体大小。 2. 使用viewport单位使用viewport单位(如vw、vh)来设置字体大小,可以根据浏览器窗口大小自动调整字体大小,而不是根据父元素大小调整。例如: ``` h1 { font-size: 5vw; /* 相当于视口宽度的5% */ } p { font-size: 3vh; /* 相当于视口高度的3% */ } ``` 上面的代码中,使用viewport单位设置字体大小h1元素字体大小为视口宽度的5%,p元素字体大小为视口高度的3%。 3. 使用JavaScript:使用JavaScript来获取浏览器窗口大小,并根据窗口大小动态设置字体大小。例如: ``` function setFontSize() { var screenWidth = window.innerWidth; var fontSize = screenWidth / 20; /* 根据实际情况调整比例 */ document.body.style.fontSize = fontSize + 'px'; } window.addEventListener('resize', setFontSize); setFontSize(); ``` 上面的代码中,使用JavaScript来获取浏览器窗口大小,并根据窗口大小动态设置字体大小。同时,使用resize事件来在窗口大小变化时重新设置字体大小

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值