响应式设计
响应式设计的概念（三要素）
- 流体网格
- 响应式图片
- 媒体查询
相关概念
- 分辨率 是指显示器所能显示的像素的多少
- 像素密度 dpi/ppi 每平方英寸的像素数
- 设备像素比 dip/dpr 类似于每像素包含的点数(dppx)
- 视网膜屏幕 屏幕显示异常清晰（设备像素比大于1）
viewport
定义
- 可视区域
- 移动端： 布局视口(大部分980px) /理想视口（视口宽度=设备宽度）
设置
<meta name="viewport" content="width=device-width,initial-scale=1.0">
设置选项
- width 视口宽度 通常设置为 device-width
- height 视口高度
- initical-calse 初始化缩放比例
- maximun-scale 最大缩放比例
- minmun-scale 最小缩放比例
- user-scaleable: yes/no 是否允许用户缩放
媒体查询
媒体类型
- screen
- .....
媒体特性
- width 视口宽度
- max-width 最大视口宽度 视口宽度<=某个值
- min-widht 最小视口宽度 视口宽度>=某个值
- height 视口高度
- max-height 最大视口高度
- min-height 最小视口高度
- device-width 设备宽度
- max-device-width 最大设备宽度
- min-device-width 最小设备宽度
- device-height 设备高度
- max-device-height 最大设备高度
- min-device-height 最小设备高度
- aspect-ratio 视口宽高比
- min-aspect-ratio
- max-aspect-ratio
- device-aspect-ratio 设备宽高比
- max-device-aspect-ratio
- min-device-aspect-ratio
- orientation: landscape(水平)/portrait(垂直方向)
- resolution 屏幕像素比 单位 dppx
- max-resolution 最大屏幕像素比
- min-resolution 最小屏幕像素比
媒体查询 用法
@media () {
}
- 用于媒体特性
- and 并且
- , 或者
- 用于媒体类型
- only
- not
断点
- <= 480px 手机 小屏幕
- >480px 并且 <= 800px 平板 中等屏幕
- >800px <= 1400px PC 大屏幕
-
= 1400px 超大屏幕
-
断点大屏幕优先
- 断点小屏幕优先