CSS3响应式布局

CSS3响应式布局

媒体类型

• all 所有媒体
• braille 盲文触觉设备
• embossed 盲文打印机
• print 手持设备
• projection 打印预览
• screen 彩屏设备
• speech "听觉"类似的媒体类型
• tty 不适用像素的设备
• tv 电视

关键字

• and
• not 表示排除某种指定的媒体类型
• only 用来定某种特定的媒体类型

媒体类型

• (max-width:600px)
• (max-device-width:480px)设备输出宽度
• (orientation:portrait)竖屏
• (orientation:landscape)横屏
• (-webkit-min-device-pixel-ratio:2) 像素比
• devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素/dips

样式引入

• 他表示分辨率在640以上的.
• 他表示分辨率在640到1920区间的.
• 要是在CSS文件里面: @media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}

移动端meta

• 
  *
• width:表示设备的宽度
• intial-scale表示初始的比例
• maximum-scale 表示缩放的最大比例
• minimum-scale 表示缩放的最小比例
• user-scalable 表示禁止用户缩放

---

以上就是响应式布局的设置。