好好学习，天天向上
本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star
链接：https://blog.csdn.net/weixin_43461520/article/details/113785278
视口
视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。
布局视口 layout viewport
布局视口是移动设备的浏览器默认设置的一个视口，用于解决早期的PC端页面在手机上显示的问题，一般这个视口默认的分辨率是980px，这种情况下元素显示得都比较小，需要手动缩放网页才能看清。
视觉视口 visual viewport
视觉视口指的是用户正在看到的网页的区域，可以通过缩放去操作视觉视口，但不会影响到布局视口，布局视口仍保持原来的宽度。
理想视口 ideal viewport
前两种视口的阅读体验都不太好，仍然需要手动缩放网页才能将页面内容看清，而理想视口则是最理想的视口尺寸，简单的说就是设备有多宽，布局的视口就有多宽，小米商城京东等网站的手机网页版都是理想视口，我们不需要缩放窗口就可以将页面内容看清。
mate视口标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
其中，name=“viewport”表示这是一个视口标签，content用于声明某些属性，常用属性有