css中pt单位,css中字体单位px,pt,em,百分比之间的区别和用法

px 即像素,一般国内网站使用较多,默认大小是16px;

pt 印刷行业常用单位

em  相对单位,相对父元素属性的单位 ,一般用于移动端布局

rem  结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小,只要修改html的大小就可以了

转换公式:

pt=px乘以3/4

倍数em=倍数x16px

注意:1em=16px。那么12px=0.75em,10px=0.625em。

em的用法

在代码重写的过程中,为了简化font-size的换算,在body选择器中声明font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了.步骤如下:

1).body选择器中声明Font-size=62.5%;

2).将你的原来的px数值除以10,然后换上em作为单位;

此时有的字体会大的出奇,因为em的值不固定,又会继承父级元素的大小,比如

body{font-size=62.5%;}  ①

div{font-size:1.2em;}   ②

p{font-size:1.2em;}  ③

解释: 其中p属于div的子集,①的设置使12px=1.2em,10px=1em,px和em成十倍关系;所以②的设置使得div字体大小为1.2em=12px;③中p的大小设置是相对②中div字体来说的,所以p的字体大小是1.2*12px=14.4px;而不是十倍关系了;

3).重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的,将③改为p{font-size:1em;}即可。

em有如下特点:

1. em的值并不是固定的;

2. em会继续父级元素的字体大小。

所以我们在写CSS的时候,需要注重三点:

1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

HTML中字体单位px pt em之间的转换

在实现打印功能时,遇到一个问题,使用px作为单位在不同的机器或者打印机上打印出的字体大小不一样,所以经过查询,发现使用pt为单位能够进行物流适配,下面是各单位之间的转换: 定义字体大小有常见三种单位, ...

css中的单位px,em和rem的区别

一.px: px就是像素,用px设置字体大小的时候会比较精确,但是有时候我们会使用不同屏幕尺寸去浏览网页.当页面相应的扩大或者缩小的时候,页面的字体大小就会出现过小或者过大.由于这种问题,就提出了使用 ...

CSS中的单位px、em、rem、%、vw、vh、vm

px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...

关于CSS中的单位px、em、rem

首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...

html,CSS文字大小单位px、em、pt的关系换算

html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

CSS文字大小单位px、em、pt详解

这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

CSS文字大小单位px、em、pt(转)

这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

你应该知道的CSS文字大小单位PX、EM、PT[转]

摘要: 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平 ...

随机推荐

BZOJ 1044 木棍分割

二分+dp. #include #include #include #include

CDOJ 92 – Journey 【LCA】

[题意]给出一棵树,有n个点(2≤N≤105),每条边有权值,现在打算新修一条路径,给出新路径u的起点v,终点和权值,下面给出Q(1≤Q≤105)个询问(a,b)问如果都按照最短路径走,从a到b节省了 ...

SPI总线的4种工作模式

spi总线的4种工作模式 0 to 4 modes SPI接口的全称是"Serial Peripheral Interface",意为串行外围接口,是Motorola首先在其MC6 ...

Android开发之漫漫长途 Fragment番外篇——TabLayout+ViewPager+Fragment

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了以及

php(二)使用thinkphp搭建项目

1.创建项目根目录,配置虚拟主机 1.1.创建项目根目录phpDemo01,将thinkphp_3.2.3_full.zip压缩包中ThinkPHP文件夹复制到项目根目录phpDemo01中. 1.2 ...

c#dataGridView 知识

一.单元格内容的操作 // 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index Conso ...

SubLime Text 3 配置SublimeREPL来交互式调试程序

1. 安装 SublimeREPL 插件 等待一下,输入sublimerepl,选择sublimeREPL,然后它就会在后台安装. 安装完之后,查看如下图 选择你要执行的*.py文件,通过这个路径,选 ...

Python中常见的字符串小笔试题

1.获取实现两个字符串中最大的公共子串 思路:    1.比较两个字符串的长度 2.获取较短字符串的所有子串 3.使用__contains__函数进行比较 4.把子串当做键,子串长度作为值,存入字典, ...

gevent和tornado异步

阅读目录 从 Tornado 说起 再来看下 Gevent 总要总结一下 原文:http://www.pywave.com/2012/08/17/about-gevent-and-tornado/ 还 ...

你可能感兴趣的