响应式网页设计

viewport

定义

• 可视区域
• 移动端:布局视口(大部分980px)/理想视口(视口宽度=设备宽度)

设置

<meta name="viewport" content="width=device-width,initial-scale=1.0">

设置选项

• width 视口宽度 通常设置为device-width
• height 视口高度
• initical-calse 初始化缩放比例
• maximum-scale 最大缩放比例
• minimum-scale 最小缩放比例
• user-scaleable:yes/no 是否允许用户缩放

媒体查询

媒体类型

• screen用于电脑显示器
• print用于打印机
• all用于所有的媒体设备
• ...

媒体特性

• width 视口宽度
• max-width 最大视口宽度 视口宽度<=某个值
• min-width 最小视口宽度 视口宽度>=某个值
• height 视口高度
• max-height 最大视口高度
• min-height 最小视口高度
• device-width 设备宽度
• max-device-width 最大设备宽度
• min-device-width 最小设备宽度
• device-height 设备高度
• max-device-height 最大设备高度
• min-device-height 最小设备高度
• aspect-ratio 视口宽高比
• max-aspect-ratio 最大视口宽高比
• min-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 超大屏幕