关于响应式开发中的 viewport概念、像素比、缩放比 简述

1. viewport影响着我们页面的什么？

viewport是虚拟显示视口，它是时刻存在的【这一点有异议，有的人说必须要设置meta标签才会存在viewport，然而在chrome浏览器的调试工具中，添加和不添加meta标签都会触发viewport的行为】，我们设置meta标签只是去改变viewport的相关属性，并非是去设置一个viewport。只是在响应式页面开发过程中，默认的viewport会造成我们页面观感不合适，所以要去设置默认的缩放比例，以及viewport默认宽度，来适应响应式的开发。

关于虚拟窗口，MDN上做了如下解释：

窄屏幕设备（如移动设备）在一个虚拟窗口或视口中渲染页面，这个窗口或视口通常比屏幕宽；然后缩小渲染的结果，以便在一屏内显示所有内容。然后用户可以移动、缩放以查看页面的不同区域。例如，如果移动屏幕的宽度为640px，则可能会用980px的虚拟视口渲染页面，然后缩小页面以适应640px的窗口大小。

总结一下，当一个页面将要展示到我们的手机上时，页面会先在viewport中渲染，假如说我们没有设定viewport的宽度，页面会按照默认的980px的宽度去渲染（想象一下把你的浏览器窗口缩小为980px的宽度，你所看到的效果就是viewport中的渲染效果），然后渲染好的页面会被缩放显示到我们的设备上（想象一下把你缩小为宽度为980px的浏览器上的画面，塞到你的手机中）。

我们来看一组示例（默认viewport）：

<style>
    .topbar {
    width: 100%;height: 200px;background-color: pink;}
    .container