当前位置:首页 > 站长学院 > 建站教程 >

移动端开发:px pt em rem 和 响应式之间的关系

作者:齐鲁建站    发布时间:2020-09-24    阅读:
移动端开发:px pt em rem 和 响应式之间的关系,最近在做响应式网站,总结一下几个单位术话,方便以后使用。

对于手机端的网站布局,一个行业性的常识是:

中小型企业网站,或者博客类的站点,建议使用响应式网站,建设和维护都会节省成本。

大型企业网站,由于复杂性,不建议使用响应式网站,而是用JS适配移动端。

下面来说 PX PT EM REM的关系:

1、px

像素(pixel),相对长度单位。是固定尺寸,用于传统网站,移动端分辨率种类颇多,不建议响应式和移动版使用PX。

2、PT

点(Points),绝对长度单位。刷业上常使用的单位,磅的意思,一般用于页面打印排版。不建议用于网站使用。

3、EM

em的大小是根据自身的font-size确定的,准确的说是自己的font-size的值,开发中每个元素都有不同的font-size,这样页面就会很乱,特别是层级嵌套会让每个元素的font-size变得混乱。不建议使用。

4、REM

REM,(root em,根em),相对长度单位。更加友好的元素。相对于根元素(即html元素)font-size计算值的倍数。是CSS3新增的一个相对单位。不过注意的是,IE8及以下的浏览器不支持。

px、pt、em、rem转化表:

pt=1/72(英寸) px=1/dpi(英寸) pt=px*dpi/72
以windows下的96dpi来计算,1pt=px*96/72=px*4/3

字号 Pixels Ems Percent Points
八号 6px 0.375em 37.5% 5pt
七号 7px 0.4375em 43.75% 5.5pt
小六 8px 0.5em 50% 6.5pt
  9px 0.55em 55% 7pt
六号 10px 0.625em 62.5% 7.5pt
  11px 0.7em 70% 8pt
小五 12px 0.75em 75% 9pt
  13px 0.8em 80% 10pt
五号 14px 0.875em 87.5% 10.5pt
  15px 0.95em 95% 11pt
小四 16px 1em 10% 12pt
  17px 1.05em 105% 13pt
  18px 1.125em 112.5% 13.5pt
四号 19px 1.2em 120% 14pt
  20px 1.25em 125% 14.5pt
小三 21px 1.3em 130% 15pt
三号 22px 1.4em 140% 16pt
  23px 1.45em 145% 17pt
小二 24px 1.5em 150% 18pt

TAG标签

pxptemrem响应式
QQ客服
QQ客服
陈经理