px rem em rpx 区别用法

任意浏览器的默认字体高都是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作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}

px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

rpx
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。
无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。
微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx

css中1px并不等于设备的1px
一般分为物理像素和独立像素
css 1px 为独立像素设备1px为物理像素
devicePixelRatio = 物理像素/ 独立像素
如果devicePixelRatio =2 表示 1个独立像素等于2个物理像素
devicePixelRatio不是固定的，他会随着屏幕的分辨率改变而改变

一般情况下：屏幕的分辨率越大代表css中的1px的物理像素就越多，devicePixelRatio的值也会增大

浏览器默认的viewport叫做： layout viewport
可以通过document.documentElement.clientWidth 来获取

浏览器可视区域的大小：visual viewport
可以通过window.innerWidth

适配移动设备的viewport：ideal viewport
这个移动设备的固定的尺寸

设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport三类，其中的 ideal viewport 是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

利用meta标签对viewprot进行控制：

通常用到的mate标签：

px rem em rpx 区别用法相关推荐

7、em/px/rem/vh/vw区别？
简介 em/px/rem/vh/vw都属于css的单位,这些单位可以分为相对单位,绝对单位 px:绝对单位,网页按照精确像素来显示 em:相对单位,相对自身定义的font-size来计算,自身没有设置 ...
CSS的px和em的区别
一.px:pixel(像素)的缩写 =>1024px就是1024像素,也就是点. =>任意浏览器的字体默认的大小都是16px. =>windows的一般浏览器是 1024*768,也 ...
像素单位（px pt rem em rpx）
px px是css像素,是一个虚拟像素,是一个相对单位例如在两个不同的设备上,1px对应的物理.设备像素是不一样的 pt pt是物理像素,它是一个绝对单位,设备出厂就固定的,不会改变通常我们说的显 ...
html5 px和em的区别,pt 与 px、em、rem 的区别与换算
DPI/pt/px 单位的含义 DPI(Dots Per Inch) 每英寸像素数.Windows 系统默认是 96dpi,Apple 系统默认是 72dpi. pt (point,磅) 是一个物理长 ...
从理解开始谈谈px rem 和 em 的区别与联系
概述古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...
移动端的vw px rem之间换算
一.vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width).1vw = 1% * 视口宽度.也就是说,一个视口就是100vw. 2.px:px应该是在css中使用最 ...
css rem和px换算,移动端的vw px rem之间换算
一.vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width).1vw = 1% * 视口宽度.也就是说,一个视口就是100vw. 2.px:px应该是在css中使用最 ...
px、em、rem、rpx 用法与区别
PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...
#名词区别篇：px、em、rem、rpx、vh、vw、vmin 、vmax、%用法与区别
px 像素,相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,相对于当前对象内文本的字体尺寸. 如果当前文本字体尺寸没有设置,则相对浏览器默认字体尺寸. 特点: 1.值不是固定的 2.会继 ...

px rem em rpx 区别用法

px rem em rpx 区别用法相关推荐

最新文章

热门文章

px rem em rpx 区别 用法

px rem em rpx 区别 用法相关推荐

最新文章

热门文章

px rem em rpx 区别用法

px rem em rpx 区别用法相关推荐