响应式网页设计

响应式设计

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

• 流体网格

• 响应式图片

• 媒体查询

  真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。

相关概念

• 分辨率 resolutio 指显示器所能显示的像素的多少

  实际分辨率是布局分辨率的两倍

• 像素密度 dpi/ppi 每平方英寸屏幕所拥有的像素数

• 像素密度越大，显示画面细节就越丰富。
  像素密度=√{（长度像素数^{2+宽度像素数}2）}/ 屏幕尺寸、
  iphone3G 165dpi 320px * 480px
  iphone4 326 dpi 640px * 960px
  iphone6s 326dpi 1334px * 750px

• 设备像素比 dip/dpr

  像素比大于2即为视网膜屏幕

• 常见设备屏幕信息 https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices

viewport

定义

• 可视区域
• 移动端： 布局视口(大部分980px)（手机页面一般不需要布局视口） /理想视口（视口宽度=设备宽度）

设置

去掉布局视口：

设置选项

• 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 () {

}
例如：
@media(max-width:800px){
body{
background:#369;
}
h1{
color:green;
}
}

• and 并且
• , 或者
• only 与媒体类型配合使用
• not 与媒体类型配合使用

断点

• 断点看需求

• <= 480px 手机 小屏幕

• 480px 并且 <= 800px 平板 中等屏幕

• 800px <= 1400px PC 大屏幕

• = 1400px 超大屏幕

  @media(min-width:480px){
  .container{
  width:480px;
  }
  }
  @media(min-width:768px){
  .container{
  width:750px;
  }
  }
  @media(min-width:1200px){
  .container{
  width:1000px;
  }
  }