网页开发的尺寸单位

平时写pc端页面时，一般是px作为单位，遇到一些比较复杂的需要定位的也会夹杂使用百分比;但是在移动端时候px很容易布局就会乱，如果使用的是相对单位比如 em，rem
下面就说他们之间的区别

单位与区别：

px：像素，相对于屏幕分辨率而言的，简单来说就是平时我们写静态页面时用px作单位，但是在firefox/chrome会发现我们的布局发生了变化；
百分比：这比较适合块状的页面设计，但是他相对于不同屏幕而言的，比如经常在写移动端的时候也会用到
em：是相对长度单位，相对于父级元素的单位。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。就是当默认字体大小为14px，那么就有1em=14px；
rem：是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

移动端单位rem和em

rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。
rem是根据html根节点来计算的，而em是继承父元素的字体。比如下面一个demo

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>Test REM</title><style>html {font-size: 40px;}body {font-size: 20px;}.em,.rem {font-size: 14px;}.em span {font-size: 1em;}.rem span {font-size: 1rem;}</style>
</head><body><div class="em"><span>font-size使用em</span></div><div class="rem"><span>font-size使用rem</span></div>
</body></html>

从效果图上明显的可以看出连个span标签中的文本大小不一样:
第一个span继承了它的父元素div的大小，所以是14px,第二个span是通过html来计算的，所以是40px;

通过这个简单的例子我们得知上面的结论是正确的。所以我们可以通过下面这种比例来对不同的手机屏幕做适配。

rem和em与px的换算

px/rem = 基值(em指的是自己元素上的font-size的值，rem指的是html中font-size的值）

px	rem	基数
8px	0.5rem	16px
10px	0.625rem	16px
12px	0.75rem	16px
13px	0.8125rem	16px
14px	0.875rem	16px
16px	1rem	16px

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>Test REM</title><style>html {font-size: 16px;}.rem span {font-size: 0.5rem;}</style>
</head><body><div class="rem"><span>font-size使用em</span></div></body>

网页开发的尺寸单位 px，百分比，em，rem相关推荐

css中单位px和em,rem的区别
1.PX 相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. ...
彻底弄懂css中单位px和em,rem的区别
2019独角兽企业重金招聘Python工程师标准>>> rem: rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem ...
总结css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
CSS尺寸单位px、em、rem、vw、vh以及%的区别
1. px px是像素单位.它是代表显示器上每一个显示的像素点,根据用户屏幕显示器的分辨率决定. 2. em em为相对单位,相对于当前元素内文本的字体尺寸.如果当前元素没有指定字体尺寸,那么以浏览器 ...
网页字体单位px、em、%、rem、pt、vm、vh介绍
本文主要介绍在编写网页中可能会用到的字体单位网页中定义字体时可能会用到的字体单位:px.em.%.rem.pt.vm.vh 等. 1. 字体单位 1.1 px px是pixel缩写,是基于像素的单位 ...
html文档元素大小相关的单位,网页字体单位px、em、%、rem、pt、vm、vh介绍
本文主要介绍在编写网页中可能会用到的字体单位网页中定义字体时可能会用到的字体单位:px.em.%.rem.pt.vm.vh 等. 1. 字体单位 1.1 px px是pixel缩写,是基于像素的单位 ...
CSS单位 px pt em和rem 之间的区别
CSS中可以定义大小的单位有四种px,pt,em,rem,而px可以说在网页开发中最常见的单位了.不过现在如今的大多数网站已经开始用rem这个单位了.那么这四个单位有什么区别呢? px|pt|em|r ...
HTML5支持rpx,css小程序的元素尺寸单位px，rpx及rem
css小程序的元素尺寸单位px,rpx及rem的简明理解.0b7d08f 做小程序和做网页是不一样的.需要理解换算一下单位.fcb0b 0b7d08f rpxa741a29f 微信小程序单位,小程序规 ...
css中的单位换算_CSS单位px、em、rem及它们之间的换算关系
作者:WangMin 格言:努力做好自己喜欢的每一件事国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者的区别与优势是什么?接下来我们就来学习一下吧! 单位px.em.rem分 ...

网页开发的尺寸单位 px，百分比，em，rem

网页开发的尺寸单位

单位与区别：

移动端单位rem和em

rem和em与px的换算

网页开发的尺寸单位 px，百分比，em，rem相关推荐

最新文章

热门文章