这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【return的用法是什么？若在for循环中，还会执行下一次循环吗？】
1.背景介绍
首先，什么是viewport。
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。
再具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
2.知识剖析
a.移动设备的默认viewport：
为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的）
b.css中的px、移动设备的分辨率以及UI口中的‘像素’分别怎么理解
css中的px：
在桌面浏览器：1px（下面我们读成‘css像素’）代表1个物理像素，也就是1css像素 = 1物理像素
没有加meta viewport标签时候：移动端viewport宽度为980px或者1024px，这时候1css像素不确定是几个物理像素（根据分辨率来算）
写个20px的文字看看效果（见演示）
在加了meta viewport标签以后呢？我们引入另外一个单位：密度独立像素dp/dip
dp/dip是在不同设备都显示为同一大小的单位（见演示）
简单理解，在使用了<xmp><meta name="viewport" content="width=device-width, initial-scale=1"></xmp>之后，所有1px = 1dp/dip
添加meta标签后20px的文字（见演示）
设备的独立像素都是可以查到的
移动设备的分辨率：
说到移动设备分辨率，这里先提另一个单位dpi(dot per inch)
dpi/ppi是表示一个每inch多少个物理像素dot的单位
在最开始是160dpi/ppi
后来因为技术的提高，为了追求高清屏幕，有了320dpi/ppi以上等等的屏幕
下面继续说移动设备分辨率
我们可以理解分辨率就是长宽分别有多少个物理像素dot
但是设备大小就那么大，所以同样大小的设备，分辨率越高，物理像素堆得越多，屏幕越清晰，也就是dpi越高（见演示）
UI口中的‘像素’
UI图中的像素，也就是psd中我们量出来的像素，比如说任务中psd图的宽度为750px或者640px（见演示）
UI口中的像素是移动设备分辨率
3.常见问题
UI图拿到之后，宽度是750px或者640px怎么办？
4.解决方案
不负责任的说法：除以2写到css里
更不负责任的说法：使用js动态控制viewport，这个这次就不讲了，自己查
5.编码实战
6.扩展思考
1.如何使用js动态控制viewport
2.如何理解其他vw、vh等单位
更多讨论
Q1: 我们写的px,rem和em应该怎么转换?
A1: 在css-reset中将html的font-size改为10px，在之后使用1rem = 10px，em是根据父元素的font-size来决定的
Q2: 移动设备默认viewport为什么是980
A2: 因为要兼顾一些比较老的网页
Q3: 平时做任务时css中如果直接按照UI图上px大小写，会偏大，为什么
A3: 因为UI图的px和css中的px不是一个单位，一般来说UI图中大小除以2写在css里
PPT：https://it-xzy.github.io/WEB-NEW/1048-css-2.html#/
腾讯视频：https://v.qq.com/x/page/u06362q88b3.html?
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树-IT修真院
IT修真院是一个免费的线上IT技术学习平台 。
每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；
所有task均是从真实项目中提炼出来的技能点，
强调实战演练+自学优先+师兄辅导的学习方式，
严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑！
点击官网注册 官网，使用师兄邀请链接有优惠。
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地
网友评论