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
样式引入
- <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 表示禁止用户缩放
以上就是响应式布局的设置。
