移动端设备

视口：浏览器显示页面的内屏幕区域

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

布局视口一般情况下设备的浏览器默认色织位一个布局视口，用于解决早期的pc端页面在手机上先显示的问题，

视觉视口（viewport）它是用户正在看到的页面区域，注意是王网页区域

通过缩放去操作视觉视口，当时不会影响布局视口布局视口任然会保持原有先宽度

理想视口 pidel viewport 

为了遍历网站在移动端盖最为理想的浏览器和夜读阅读而设立的理想视口 对射本来是最为理想的视口尺寸 需要手动添加mate标签 通过浏览器的操作

mate视口标签的目的：布局视口的狂赌应该和理想视口的狂赌保持一致， 简单理解就是设备有多宽，我们的布局视口就有多宽

winth-宽度是viewport宽度 可以设置为device-width intial-scalt=1.0 max-width 最大宽度  min-width最小宽度  content=width，device-width

视口宽度域设备宽度保持一致

视口的默认缩放保持一次

不永许用户自主缩放 最大允许缩放1.0 、

二倍图

物理像素屏幕显示的最小颗粒是物理真的存在的 

css像素又称之为虚拟像素 设备独立像素或逻辑像素也可以叫做直觉像素

开发过程中都会用理想视口  而理想视口就是将布局视口修改为视觉视口

二倍图 是一种技术  可以将更多的物理像素点压缩成一块屏幕里从而达到最高的分辨率

移动端布局

流式布局  最小宽度  320px   最大宽度980px 

弹性布局 display  flex

em 相对单位   相对与父元素以及自身的字体大小 按照就近原则

rem 相对单位 相对于父元素html 字体大小

优势 父元素的字体大小可以不一致  而rem 相对与根元素 的字体大小  

pt 像素点

媒体查询 @media  sreem  查询显示器 all 用于所有的媒体设备

关键字 @media

查询类别 media type

关键字 and 

然后条件 （）{}

媒体类型not 是用来除某个设备外的其他设备

only 是用来指定某一个特定的设备

lass 基础css 处理器

将初始化html的font-size 属性值 50 

划分等分   分别又5   10   15  

最小等分为375/50