前端面试题 - width=device-width以及1rem、1em的含义？
设备像素（device pixels）是指与硬件设备直接相关的像素，是真实的屏幕设备中的像素点。比如说，一个电脑显示器的参数中，最佳分辨率是1920x1080，那么指的就是这个显示器在屏幕上用于显示的实际像素点，也就是设备像素。
另一个概念是css像素（css pixels）。css像素是指网页布局和样式定义所使用的像素，也就是说，css代码中的px，对应的就是css像素。
那么，css像素和设备像素有什么区别呢？简单地说，css像素比设备像素要更“虚拟”一些。下面来解释这一点。
css像素和设备像素之间是一种可变的转化关系。在100%缩放比例下，1个css像素等于1个设备像素。
在表示某一数目的css像素时，在放大状态下使用了更多的设备像素，而在缩小状态下使用了更少的设备像素。这就是css像素和设备像素的概念。
视口（viewport），指的是浏览器窗口中用来显示网页的区域。以浏览器来说，就是浏览器的窗口内容区域（除去标题栏，菜单栏，地址栏，状态栏等等浏览器的“周边”的东西）。
视口表现得像是之上的一个块元素，它限制并确定的宽度，但却不属于html结构，不能被设置样式。
而且，任何时候，视口的尺寸都会随着浏览器窗口的大小变化而变化。桌面电脑中的视口，就是这样的一个概念。
相比桌面电脑，在手机上浏览网页，最大的差异在于屏幕尺寸。电脑端的页面到手机上，很容易出现水土不服（一些流体布局的网页会在过窄的视口中变得一团乱），
为了让用户在手机上也获得最佳的网页浏览体验，应该让视口更宽，超越屏幕的宽度。所以，在手机浏览器中，视口被划分为了两个：可见视口（visual viewport）和布局视口（layout viewport）。
- 可见视口是指当前在手机屏幕上显示的部分。当你做缩放的时候，可见视口的尺寸（css像素值）也会变化。
- 和可见视口不同，布局视口则是整个页面的窗口，用于元素布局和尺寸计算（比如百分比的宽度值），而且比可见视口明显要更宽。无论你缩放，或者滑动页面，甚至翻转手机屏幕，布局视口始终不变。
布局视口的宽度是由手机浏览器定义的，随浏览器不同而不同。比如Safari是980px，Android Webkit是800px。这都远比屏幕宽度值要大。
手机中的布局视口是可以更改的。你一定在很多移动版网页中见到过下边这个标签元素。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
这其中有一句width=device-width，它的意思是，把手机浏览器的布局视口的宽度，更改为当前设备的宽度，也就是等于可见视口。
- em，是一个相对单位。相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px。
- rem，是一个相对单位。是相对HTML根元素，通过rem既可以做到只修改根元素就可以成比例的调整所有字体。
通俗易懂的前端面试题网站： https://www.front-interview.com
posted on
