搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
繁依Fanyi0
这个屌丝很懒,什么也没留下!
关注作者
热门标签
jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article
热门文章
1
IDEA无法识别项目中的Java类_idea不识别java文件
2
2024年人才市场大趋势,这类IT人才缺口高达400万人!_2024紧缺型技术人才
3
Git分布式版本控制工具(一小时学会,快熟入门,随用随查)_sumgit
4
基于Selenium+Python的自动化测试_qq邮箱自动化测试 selenium
5
python从入门到精通——完整教程_python进阶教程
6
git在Visual Studio Code如何使用以及git stash的使用_visual studio code git
7
嵌入式培训机构四个月实训课程笔记(完整版)-Linux ARM平台编程第四天-Bootloader编写2(物联技术666)
8
JDK新特性
9
Ubuntu添加和设置开机自动启动程序的方法_ubuntu 开机自动设置can0 bitrate
10
基于stm32的智能小车_stm32智能小车
当前位置:
article
> 正文
em与px的介绍及换算方法_em和px怎么换算
作者:繁依Fanyi0 | 2024-02-17 01:34:40
赞
踩
em和px怎么换算
em是何物?
em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:
1em=16px。那么12px=0.75em,
10px=0.625em。为了简化font
-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px,
这样12px=1.2em,
10px=1em,
也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
em有如下特点
:
1.
em的值并不是固定的;
2.
em会继承父级元素的字体大小。
重写步骤:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
声明:
本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:
https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/98740
推荐阅读
article
Mac 打开/
关闭
iCloud
后导致
桌面
文件
夹
、文档删除
,
恢复步骤!_
mac
icloud
关闭
...
后
,
导致
桌面
内容全部丢失
,
再次打开同步
,
发现还是确实很多内容
,
如何找回最初的
文件
副本。找到这些
文件
夹
,
从这些
文件
夹
中
,
找...
赞
踩
article
机器人编程教程:使用
Git
和
SD
卡进行
代码
备份
(
嵌入式
)...
通过使用
Git
和
SD
卡进行
代码
备份
,你可以确保你的
嵌入式
系统
代码
的安全性和可追溯性。定期
备份
代码
可以帮助你在
代码
丢失或系...
赞
踩
article
Unity ---
射线
检测
_
unity
射线
检测
...
然后这个方法的参数中的第一个是我们发出的
射线
,第二个是
射线
发出的长度(此时其实就是线段,然后这个参数可写也可不写,不写的...
赞
踩
article
基于
Unity3d
的
驾驶
模拟
器
的
设计
与实现_
unity
模拟
驾驶
...
Unity3d
是一款十分成熟
的
游戏开发软件。经过多年
的
改进与发展,
Unity3d
一直占据着游戏开发
的
市场中占有一席之地。...
赞
踩
article
阿里
云
联合平行
云
推出
云
XR
平台
,支持沉浸式
体验
应用
快速落地 | 电子书免费下载_
xrali
...
简介:将让沉浸式
体验
、虚拟现实等
应用
创新蓬勃涌现点击免费下载《
云
XR
平台
新品发布会演讲合集》近日,
阿里
云
与平行
云
联合发布...
赞
踩
article
Unity2021
如何设置
中文
模式
_
unity2021
怎么改
中文
...
Unity2021
如何设置
中文
模式
_
unity2021
怎么改
中文
unity2021
怎么改
中文
下...
赞
踩
article
Android
Gradle
插件版本说明_
buildfeatures
.
aidl
...
Android
Studio 构建系统以
Gradle
为基础,并且
Android
Gradle
插件添加了几项专用于...
赞
踩
article
《
unity2021
》如何改成
中文
_
unity3d
myproject
中文
...
unity2021
是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维...
赞
踩
article
12
个
考研
必知
的
专业
概念!...
你知道吗,
考研
也有很多“黑话”!很多即将跨入25备考
的
同学们,对于
考研
的
一些“黑话”和基础知识都不了解,有时候看招生简章...
赞
踩
article
Python
游戏
工具包
---
Pygame
最常用的
15
个模块详解(附
pdf
版本)...
↑点击上方“一行数据”关注 + 星标~每周送书,绝不错过本文不查错,三连送书最近很多读者想学习使用python来制作
游戏
...
赞
踩
article
Unity
下载、
安装
、
汉化
_
unity
汉化
...
把{version}换成你当前
安装
的版本,比如说如果你的是2020.3.xxx,那就填2020.3,下载后得到一个zh-...
赞
踩
article
AttachCurrentThread
报错_
jni
attachcurrentthread
什么
情况...
安卓5.0
AttachCurrentThread
报错_
jni
attachcurrentthread
什么
情况下会失败...
赞
踩
article
Windows
Server
2008
R2活动目录
回收站
...
在
Windows
Server
2008
R2之前的所有的系统中,如果我们误删除了用户,是可以恢复的了,其原因在于域中的...
赞
踩
article
使用
TortoiseSVN
碰到
的
几个问题(1)-
导入
,
提交
,
更新
...
1)
导入
数据到版本库第一种情况
,
使用
Import
导入
命令
的
时候不能选择包含哪些指定文件或目录
,
导入
的
文件夹不能变成工作...
赞
踩
article
Unity3D
赛
车
游戏+脚本基础_
unity
场景
里实现能自动行驶
的
车
...
1秒钟有30帧,帧与帧之所消耗
的
时间是不一样
的
,那么我如何知道上一帧用了多少时间?Time.deltaTime就是为了解...
赞
踩
article
基于
Java
+
SpringBoot
+
Vue
.
js
前后
端分离服装购物商城系统设计和实现
可行性
分析...
基于
Java
+
SpringBoot
+
Vue
.
js
前后
端分离服装购物商城系统设计和实现
可行性
分析毕业设计毕设作品,黄菊华...
赞
踩
article
unity
的
下载
和安装_
unity
hub
csdn
...
我做了一个不知道算不算好的决定,其实还是很难过的,但是在团队里总是觉得好像根本没有我的位置,不知道该做什么,他们就已经可...
赞
踩
article
pytorch
i2i
图像
分割
测试集_水平集_
图像
分割
...
外文原址:https://wiseodd.github.io/techblog/2016/11/05/levelset-...
赞
踩
article
WPF中
MaterialDesignThemes
前端
框架
的
使用
(超详细图解步骤)及
项目
框架
变更
...
WPF中
MaterialDesignThemes
前端
框架
的
使用
(超详细图解步骤)及
项目
框架
变更
_materialdesi...
赞
踩
article
flutter
flame
基本结构...
flame
是一个十分轻便适合做小游戏的引擎,基于dart语言的
flutter
框架。简单点来说,他就是分为以下几步开始→循...
赞
踩
相关标签
macos
icloud
git
嵌入式
unity
游戏引擎
游戏
弹性计算
人工智能
调度
vr&ar
图形学
开发者
UED
iOS开发
异构计算
Cloud Native
阿里云开发者
开发语言
unity3d
考研
android ndk
Android
AttachCurrentThread