响应式媒体查询——媒体设备：
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视
min- 当屏幕大小 大于等于 某个值的时候识别 max- 当屏幕大小 小于等于 某个值的时候识别
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width:100px; height:100px; background-color:red; } @media all and (min- 500px) { #box{ background-color: green; } } @media all and (max- 500px) { #box{ background-color: yellow; } } </style> </head> <body> <div id="box"></div> </body> </html>
屏幕水平和垂直（orientation:portrait | landscape）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } div{ width:100px; height:100px; background-color:red; } @media (orientation:portrait) { div{ background-color: yellow; } } @media (orientation:landscape) { div{ background-color: green; } } </style> </head> <body> <!-- @media (orientation:portrait) 屏幕垂直 @media (orientation:landscape）
屏幕水平
-->
<div>1</div> </body> </html>
媒体查询样式引入方式：
方法一：
<link rel="stylesheet" href="01.css" media="all and (min-400px)"/>
方法二：
<style> @import url(01.css) (min-400px); body{ margin: 0; } </style>
bootstrap：
container容器：
<!-- 容器： container 固定宽度 container-fluid 百分比宽度 --> <div class="container">container</div><br /> <div class="container-fluid">container-fluid</div>
栅格系统对应的不同屏幕：
lg 大屏幕 大桌面显示器 (≥1200px)
md 中等屏幕 桌面显示器 (≥992px)
sm 小屏幕 平板 (≥768px)
xs 超小屏幕 手机 (<768px)
<div class="container-fluid"> <div class="row"> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div> </div> </div>
col-md-offset-*设置列偏移
<div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-1">1</div> <div class="col-md-2 col-md-offset-4">2</div> </div> </div>
更多关于bootstrap内容，参考官网：http://www.bootcss.com/