面试官:说一下 px、em、rem、vw/vh?em和rem的区别?

关于PX

CSS中有非常多的长度单位

整体可以分成两类: 

绝对长度单位(Absolute length units); 

相对长度单位(Relative length units);

px(绝对长度单位)

像素是影响显示的基本单位。(比如屏幕上看到的画面、一幅图片);

pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel;

 “像素”表示“画像元素”之意,有时亦被称为pel(picture element);

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第1张图片

我们经常说一个电脑的分辨率、手机的分辨率,还有CSS当中的像素又是什么关系呢?

像素单位常见的有三种像素名称:

  • 设备像素(也称之为物理像素); 
  • 设备独立像素(也称之为逻辑像素);
  • CSS像素;

设备像素,也叫物理像素。

  • 设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了;
  • 我们在购买显示器或者手机的时候,提到的设备分辨率就是设备像素的大小;
  • 比如iPhone X的分辨率 1125x2436,指的就是设备像素;

设备独立像素,也叫逻辑像素。

  • 如果面向开发者,使用设备像素显示一个100px的宽度,那么在不同屏幕上显示效果会是不同的
  • 开发者针对不同的屏幕很难进行较好的适配,编写程序必须了解用户的分辨率来进行开发;
  • 所以在设备像素之上,操作系统为开发者进行抽象,提供了逻辑像素的概念
  • 比如你购买了一台显示器,在操作系统上是以1920x1080设置的显示分辨率,那么无论你购买的是2k、4k的显示器,对于开发者来说,都是 1920x1080的大小。

CSS像素

  • CSS中我们经常使用的单位也是pixel,它在默认情况下等同于设备独立像素(也就是逻辑像素);
  • 逻辑像素面向开发者;

我们可以通过JavaScript中的screen.width和screen.height获取到电脑的逻辑分辨率:

DPR:device pixel ratio

2010年,iPhone4问世,不仅仅带来了移动互联网,还带来了Retina屏幕;

Retina屏幕翻译为视网膜显示屏,可以为用户带来更好的显示;

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第2张图片

在Retina屏幕中,一个逻辑像素在长度上对应两个物理像素,这个比例称之为设备像素比(device pixel ratio);

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第3张图片

可以通过window.devicePixelRatio获取到当前屏幕上的DPR值;

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第4张图片

PPI:每英寸像素(英语:Pixels Per Inch,缩写:PPI)

通常用来表示一个打印图像或者显示器上像素的密度;

1英寸=2.54厘米,在工业领域被广泛应用;

问题考点——响应式

1.rem是什么?

em是一个相对长度单位,相对于父元素

rem也是一个相对长度单位,相对于根元素,常用于响应式布局

(rem:r’是“root”的缩写,相对于根元素的字体大小。)

rem与其他长度单位的区别

  • px,绝对长度单位,最常用
  • em,相对长度单位,相对于父元素,不常用(相对于父元素,各个元素的父元素不一,没有统一标准)
  • rem,相对长度单位,相对于根元素,常用于响应式布局

2.响应式布局(移动端适配)的常用方案

  • media-query,根据不同的屏幕宽度设置根元素font-size
  • rem,基于根元素的相对单位

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第5张图片

然后使用rem设置 总体字体大小 和 div1的宽度

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第6张图片

在iphone6/7/8机型上(html {font-size: 100px;})可以看到,

div1盒子的字号为16px(0.16×100=16px)

宽度为100px(1×100=100px)

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第7张图片

iPhone也一样,宽度为375px

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第8张图片

在iphone6/7/8 Plus机型上(html {font-size: 110px;})

div1盒子的字号为17.6px(0.16×110=17.6px)

宽度为110px(1×110=110px)

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第9张图片

接着就可以对任何元素的属性实现响应式,比如:line-height行高、padding内边距、margin外边距……

3.rem的弊端——“阶梯”性

有弊端,但还是能用

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第10张图片

“阶梯”性 —— 在某一阶梯的整个跨度中无变化。

如果想要实现,376px比375px大一点?或者413px比375px大?(需要产生变化)

4.网页视口尺寸

  • window.screen.height      //屏幕宽度(手机点亮屏幕)
  • window.innerHeight          //网页视口高度(浏览器去除头尾,可以显示内容的部分)
  • document.body.clientHeight        //body高度(内容高度)

如图,667是window.screen.height;553是window.innerHeight;内容高度为浏览器头部底到红色矩形底

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第11张图片

模拟器没有头和底部工具栏,与实际不同。

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第12张图片

document.body.clientHeight为内容高度(随网页内容变化)

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第13张图片

5.vw/vh

  • vh网页视口高度(window.innerHeight)的1/100
  • vw网页视口宽度(window.innerHeight)的1/100
  • vmax取两者最大值,vmin取两者最小值

把手机上能显示网页的区域的高度与宽度平均分成100份,1个vh/vw就是1份。——“阶梯”性就没有了。

10vw/10vh就是网页视口的宽度/高度 百分之十 即 十分之一 

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第14张图片

vmax取vw和vh的最大值(变成正方形)

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第15张图片

再看看vmin

面试官:说一下 px、em、rem、vw/vh?em和rem的区别?_第16张图片

等式

你可能感兴趣的:(html,前端)