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

/*mobile*/
@media (max-width: 767px) {
}

// /*pad*/
@media (min-width: 768px) and (max-width: 1024px) {
}

// /*desktop*/
@media (min-width: 1025px) {
  .staticFooter {
    color: red;
  }

  .fixedFooter {
    color: blue;
  }
}

样式引入

<link rel="stylesheet" type="text/css" href="../css/index.css" media = "screen and(min-width:640px)">他表示分辨率在640以上的.
<link rel="stylesheet" type="text/css" href="../css/index2.css" media = "screen and(min-width:640px) and (max-width:1920px)"> 他表示分辨率在640到1920区间的.
要是在 CSS 文件里面: @media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}

移动端 meta

<meta name="viewport" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
width:表示设备的宽度
intial-scale 表示初始的比例
maximum-scale 表示缩放的最大比例
minimum-scale 表示缩放的最小比例
user-scalable 表示禁止用户缩放

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