屏幕尺寸(宽度)
超小屏幕，如：手机，尺寸 <768
小型屏幕：如：平板，尺寸 >=768,<992
中等屏幕：如：电脑，尺寸 >=992,<1200
超大屏幕：如：电视，尺寸 >=1200
响应式布局
根据不同的客户端，显示不同的效果，就称为响应式布局。
由于移动端设备访问网站的比例大幅提升(已经称为主流)，因此我们设计网站时需要移动设备有限。
解决方案
根据不同的客户端，跳转到不同的网站
适合于几乎无法兼容显示的大型网站，如：京东等
解决：
window.navigator['userAgent']可以获取客户端类型
使用媒体查询
语法：
@media 媒体查询标志 [only] screen [只]支持屏幕 and 并且的意思，用于条件 min-width 最小宽度 max-width 最大宽度 min-height 最小高度(了解) max-height 最大高度(了解)
使用方式1
<style> @media screen and (max-width:992px) and (min-width:768px) { div { width: 100%; height: 200px; background: blue; } } </style>
使用方式2
<style> @import url(02-chaoxiao.css) screen and (max-width:768px); </style>
使用方式3
<head> <link type="text/css" rel="stylesheet" href="02-chaoda.css" media="screen and (min-width:1200px)" /> </head>
viewport（了解）
说明：viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
尺寸单位(回顾)
px：像素，绝对单位
%：百分比，相对于父级元素的百分比
em：相对于父级元素的倍数
rem：相对于HTML元素的倍数
bootstrap
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
中文官网：www.bootcss.com
下载：用于生产环境的版本
使用：
拷贝基础模板，修改依赖文件路径。
布局容器
container、container-fluid
然后就是复制粘贴。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
