em px pt单位介绍及换算

2024-03-15 13:38
文章标签 介绍 em 单位 pt px 换算

本文主要是介绍em px pt单位介绍及换算,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

PX\EM\PT单位介绍

px Pixel单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐;
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸,国外使用比较多,这里em与html <em>标签的"EM"拼写完全相同,而这里em作为单独文本单位。
pt单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。

1. 以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持 在这里也推荐使用PX作为单位;
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的,QQ截图也是使用PX作为长度宽度单位。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

em与px换算

任意浏览器的默认字体高度16px(16像素)。
所有未经调整的浏览器都符合: 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作为单位就行了。
12px相当于9pt长度;
12px相当于0.75em长度;
9pt相当于0.75em长度;
一般我们使用em换算px较多
高级em与px换算:
具体使用时候:
我们在对全体html标签声明初始一次font-size=62.5%
如:
*{font-size=62.5%}
即可此后面布局可依据以下技巧进行设置em单位
font-size:1.2em等于font-size:12px
font-size:1.4em等于font-size:14px
以此类推相当于初始font-size=62.5%后,em与px单位就只有10倍差距,以便方便计算与设置em长度数值使用。
em单位有如下特点:

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。
我们在写CSS的时候如果要用em为单位,需要注意两点:
  1. body选择器中声明Font-size=62.5%;
  2. 将你的原来的px数值除以10,然后换上em作为单位;
  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
  也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
  但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。
推荐网页单位 

所以为了单位换算错误推荐使用PX(像素)作为网页制作单位。
以上为大家介绍了px em pt单位,及换算方式,一般现在我们使用长度单位都以px为长度单位。这里我们也推荐使用以px(像素)为网页的尺寸长度单位,符合浏览器的像素单位,同时也为了方便计算长度尺寸。
关于px pt em单位总结 

1)、推荐px像素为单位:通常我们使用px(像素为单位)较多,其次是em单位,平时推荐大家以px为单位;
2)、我们的显示屏分辨率以px像素为单位;
3)、我们QQ截图时候也是以px像素单位。

这篇关于em px pt单位介绍及换算的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/812164

相关文章

zookeeper端口说明及介绍

《zookeeper端口说明及介绍》:本文主要介绍zookeeper端口说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、zookeeper有三个端口(可以修改)aVNMqvZ二、3个端口的作用三、部署时注意总China编程结一、zookeeper有三个端口(可以

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP

MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)

《MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)》掌握多表联查(INNERJOIN,LEFTJOIN,RIGHTJOIN,FULLJOIN)和子查询(标量、列、行、表子查询、相关/非相关、... 目录第一部分:多表联查 (JOIN Operations)1. 连接的类型 (JOIN Types)

java中BigDecimal里面的subtract函数介绍及实现方法

《java中BigDecimal里面的subtract函数介绍及实现方法》在Java中实现减法操作需要根据数据类型选择不同方法,主要分为数值型减法和字符串减法两种场景,本文给大家介绍java中BigD... 目录Java中BigDecimal里面的subtract函数的意思?一、数值型减法(高精度计算)1.

Pytorch介绍与安装过程

《Pytorch介绍与安装过程》PyTorch因其直观的设计、卓越的灵活性以及强大的动态计算图功能,迅速在学术界和工业界获得了广泛认可,成为当前深度学习研究和开发的主流工具之一,本文给大家介绍Pyto... 目录1、Pytorch介绍1.1、核心理念1.2、核心组件与功能1.3、适用场景与优势总结1.4、优

Java实现本地缓存的常用方案介绍

《Java实现本地缓存的常用方案介绍》本地缓存的代表技术主要有HashMap,GuavaCache,Caffeine和Encahche,这篇文章主要来和大家聊聊java利用这些技术分别实现本地缓存的方... 目录本地缓存实现方式HashMapConcurrentHashMapGuava CacheCaffe

Spring Security介绍及配置实现代码

《SpringSecurity介绍及配置实现代码》SpringSecurity是一个功能强大的Java安全框架,它提供了全面的安全认证(Authentication)和授权(Authorizatio... 目录简介Spring Security配置配置实现代码简介Spring Security是一个功能强