响应式设计

响应式设计

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

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

相关概念

  • 分辨率
  • 像素密度 dpi/ppi 每平方英寸的像素数
  • 设备像素比 dip/dpr

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

posted @ 2017-08-13 14:41  kylong  阅读(144)  评论(1)  编辑  收藏  举报