本文主要是介绍关于响应式开发中的 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这篇关于关于响应式开发中的 viewport概念、像素比、缩放比 简述的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
