px和em和rem的区别
一。px特点:
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
二。em的特点
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
常见写法:
body {
font-size: 62.5%;
/*10 ÷ 16 × 100% = 62.5%*/
}
h1 {
font-size: 2.4em;
/*2.4em × 10 = 24px */
}
p {
font-size: 1.4em;
/*1.4em × 10 = 14px */
}
li {
font-size: 1.4em;
/*1.4 × ? = 14px ? */
}
三。rem的特点
rem是指相对于html根元素的字体大小。除了IE8及更早版本外,所有浏览器均已支持rem。
常见如下:
html {
font-size: 62.5%;
/*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.4rem;
/*1.4 × 10px = 14px */
}
h1 {
font-size: 2.4rem;
/*2.4 × 10px = 24px*/
}
自动换算的网址http://pxtoem.com/
px和em和rem的区别的更多相关文章
- css中px,em和rem的区别
css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- (转)px、em、rem的区别和使用
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...
- px、em、rem的区别
一.PX: px像素(Pixel):相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用 ...
- 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...
- 比较css中单位px,em和rem的区别
国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原 ...
- 彻底弄懂css中单位px和em,rem的区别
PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...
- css中单位px和em,rem的区别
PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...
- px和em,rem的区别
1.px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个d ...
随机推荐
- 原来今天是感恩节-Linux基础继续&MySQL和PHP
hi 原来今天是感恩节.虽然一直没有过这个节日的习惯,但仅仅是听到感恩的消息,都能想到一幅幅画面.愿大家安好! 下午开题会议还是有所收获,悄悄的,就变向那个不喜欢自己的人了. 一.Linux基础(二) ...
- AngularJS笔记---数据绑定
一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...
- Java Web之Servlet技术
1.Servlet基础 针对Servlet技术开发,Sun公司提供了一些列接口和类,其中最重要的是javax.servlet.Servlet接口,两个重要的包是javax.servlet和javax. ...
- 第28章 行为型模式大PK
27.1 策略模式 VS 命令模式 27.1.1 策略模式实现压缩算法 //行为型模式大PK——策略模式和命令模式 //实例:用策略模式实现压缩算法 #include <iostream> ...
- AC日记——密码翻译 openjudge 1.7 09
09:密码翻译 总时间限制: 1000ms 内存限制: 65536kB 描述 在情报传递过程中,为了防止情报被截获,往往需要对情报用一定的方式加密,简单的加密算法虽然不足以完全避免情报被破译,但仍 ...
- HTML插入地图的方法
方法/步骤 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在"1 ...
- JS常用方法函数整理
1.document.write("");为输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...
- 在表单中元素的onchange事件的兼容性问题
onchange:在值发生改变的时候触发 text:当光标离开的时候如果内容有变化就触发 radio/check:标准浏览器下点击的时候只要值变了就触发 非标准浏览器下焦点离开的时候如果值变了就触发
- 用 C# 轻松读取、改变文件的创建、修改、访问时间
创建时间是文件存入到电脑中的时间,而修改时间则是改变起内容的最后时间 // 读取文件的创建.修改.访问时间FileInfo fi = new FileInfo("C://test.txt&q ...
- 【转】【MySql】mysql存储过程中的异常处理
定义异常捕获类型及处理方法: DECLARE handler_action HANDLER FOR condition_value [, condition_value] ... statement ...