响应式布局学习笔记

<h2>1.什么bootstrap？
<h6>Bootstrap是由Twitter推出的开源CSS框架
历史：Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

<h3>2.为什么要学习bootstrap？
<h6>移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

<h3>3.如何引入cdn(官网给出了方法，也可以引入百度的)

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"          href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
 <!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<h2>4.也可下载之后引入本地
<h2>5.viewpoint属性

<meta name="viewport" content="width=device-width, user-scalable=no" >
  width:  视口的宽度，可以取值为数值，或device-width
         height：视口的高度，一般不指定
         initial-scale：初始时的缩放倍率
         minimum-scale : 允许的最小缩放倍率
         maximum-scale :  允许的最大缩放倍率
         user-scalable : 是否允许用户手动缩放，可取值1/0/yes/no

<h2>6.css media query

<link media="screen and (min-width:990px) and (max-width:1000px)" rel="stylesheet" type="text/css" href="css/pc.css"/>
也可以：
在css中直接区分
eg：@media screen and (min-width: xxpx) {  }

响应式布局学习笔记

推荐阅读更多精彩内容