响应式设计

Posted 2020-10-02

响应式设计

响应式设计的概念（三要素）

• 流体网格
• 响应式图片
• 媒体查询

相关概念

• 分辨率 是指显示器所能显示的像素的多少
• 像素密度 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
• print
• .....

媒体特性

• 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 超大屏幕

• 断点大屏幕优先

• 断点小屏幕优先