视口

br>视口：就是浏览器显示页面内容的屏幕区域

视口分为：布局视口 视觉视口 理想视口

布局视口：一般移动端设备的浏览器都默认设置了一个布局视口
为了解决早期pc端页面

在移动端上的现实问题

苹果 安卓 基本上设置这个视口的分辨率980px

视口视觉：你看到的网页区域，指的是网址的区域

通过缩放去操作视觉视口不会影响布局视口

理想视口：1、是网站在移动端设备的浏览器中最理想的状态（浏览器和阅读宽度设定）

2、对设备来说就是最理想的尺寸

3、引入一个meta标签，通知浏览器进行相应的操作

4、meta标签的目的就是为了使布局视口的宽度应该与理想视口的宽度一致

width=device-width当前的宽度与当前的设备一致

initial-scale=1初始的缩放比例（默认为1）

minimun-scale=1允许用户缩放到的最小比例（默认为1）

maximun-scale=1允许用户缩放到的最大比例（默认为1）

user-scalable=no用户是否可以手动缩放（默认不允许）因为我们不希望用户放大缩小页面

注意：移动端必须写meta标签且是用户禁止缩放

视口缩放：在375px的设备中截图出来到ps中测量是750px

在ps值比设备中的px值大一倍

物理像素：1、指的就是屏幕像是的最小点，是真实存在的，设备厂商在生产设备时就已经固定好了，比如苹果6，7，8

2、视网膜高清显示屏：retina显示屏，作用是把更多的物理像素点压缩致一块屏幕里，像素点越密集
看的越清晰，达到更高的分辨率，提高画质

物理像素比：dpr=物理像素/逻辑像素

物理像素：就是设备所显示的像素(手机截图在ps中量取出来的大小)

逻辑像素：页面在css中书写的像素

了解：ppi：每英寸所显示的像素点的密度

dpi：每英寸所显示的像素点的点数

常见的设计稿：设计图：640px dpr 2

750px dpr 2

1125px dpr 3

常见的单位：px em pt(磅)更多用于安卓设置 deg角度 %

rem:跟随html的font-size:;值的大小（默认状态下1rem=16px)

vw:视口的宽度width:100vw;占满整个视口的宽度

能够随着视口的宽度变化而变化

vh:视口的高度height:100vh;占满整个视口的高度

能够随着视口的高度变化而变化

vmin:作比较，窗口的宽高谁小，就按照谁先显示

vmax:作比较，窗口的宽高谁大，就按照谁先显示