一、移动端 vs pc端
- 移动端特点 1.1 PC端/移动端不同？ PC端
屏幕大，网页固定版心
端浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流）
移动端
手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性
1.2 物理分辨率和逻辑分辨率 物理分辨率：硬件所支持的，屏幕出厂就设定无法修改
逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率
1.3 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口的分类： 布局视口 。 iOS, Android基本都将这个视口分辨率设置为980px。
视觉视口。用户正在看到的网站的区域。
理想视口。 设备有多宽，我的网页就显示有多宽
1.4 视口标签 有了视口标签，可以达到我们想要的理想视口。
width=device-width：视口宽度=设备宽度
initial-scale=1.0：初始页面缩放倍数
maximum-scale=1.0 最大缩放倍数
user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放
模拟器上显示分辨率
css像素：设备的独立像素，
物理分辨率：设备像素
2倍， 3倍关系？？
设备像素比(dpr)=物理像素/CSS像素
iphone6 1css 像素===2物理像素
s5 1css像素===3物理像素。
iphone3gs 320*480
iphone4 640*960
设计稿：
1.css像素 375？ 物理像素？ 750 （为了清晰的页面）
2.1份（提供）， 多份？
（1） 百分比，
（2） 弹性盒布局
（3） rem布局
rem：等比缩放布局
二、响应式布局（核心：找断点） 1.常见的布局方案
固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；
可切换的固定布局： 同样以像素作为页面单位，参考主流这杯尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最适合的那套宽度布局；
弹性布局： 以百分比作为页面的基本单位可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；
混合布局： 同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位；
布局响应： 对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）； 移动优先（从移动端向上设计）：无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）；
css3新增的媒体查询： 媒体查询的含义
CSS2 引入了媒体类型
CSS2 中引入了 @media 规则，它让为不同媒体类型定义不同样式规则成为可能。
例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备，甚至还有一组用于电视，等等。
不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。
CSS3 引入了媒体查询
CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。
媒体查询可用于检查许多事情，例如：
- 视口的宽度和高度
- 设备的宽度和高度
- 方向（平板电脑/手机处于横向还是纵向模式）
- 分辨率
使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。 （更多详情见w3cschool）
横竖屏检测：
px em rem（实现等比缩放布局） 一、区别：
- px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
- em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 3.em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。
总之em相对于父元素，rem相对于根元素。 二、em实例：
- 子元素字体大小的em是相对于父元素字体大小 2.元素的width/height/padding/margin用em的话是相对于该元素的font-size
- 任何浏览器默认字体大小都是16px，所有未经调整的浏览器都符合1em=16px
vw vh vw/vh是一个相对单位（类似于em,rem)
vw：viewport width 视口宽度单位 vh：viewport height 视口高度单位 相对视口的尺寸计算结果
1vw = 1/100视口宽度 1vh = 1/100视口高度 注意：和百分比是有区别的，百分比时相对于父元素来说得，而vw和vh总是针对于视口来说的。
<!-- vh view-height
100vh === 视口的高度
vw view-width
100vw ==== 视口高度
iphone6 100vw === 375px 1vw = 3.75px
iphone6 plus 100vw === 414px 1vw = 4.14px
