BootStrap入门

1、建议将JavaScript脚本文件置于文档尾部，即相邻</body>标签的前面，不要置于<head>标签内。

2、<meta name="viewport" content="width=device-width; initial-scale=1.0">

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例为1.0（initial-scale=1），即网页初始大小占屏幕面积的100%。更多关于viewport meta标签的用法，可以参考苹果公司官方文档：

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

viewport

Changes the logical window size used when displaying a page on iOS.

Syntax

Discussion

Use the viewport meta key to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.

For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing a Safari on iOS-specific web application, you should set the width to the width of the device.

3、使用jQuery检测浏览器宽度，并为不同的情况调用不同的样式表：

 1 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 2 
 3 <script type="text/javascript">
 4 
 5 $(document).ready(function() {
 6 
 7     $(window).bind("resize", resizeWindow);
 8 
 9     function resizeWindow(e) {
10 
11         var newWindowWidth = $(window).width();
12 
13         if(newWindowWidth < 600) {
14 
15             $("link[rel=stylesheet]").attr({href: "mobile.css"});
16 
17          } else if(newWindowWidth > 600) {
18 
19             $("link[rel=stylesheet]").attr({href: "style.css"});
20 
21             }
22 
23     }
24 
25 });

4、响应式Web设计的思想如下：

一方面要保证页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸；

另一方面则是增强可读性和易用性，帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。

针对这个问题，我们可以使用下面这条样式代码来解决：display:none;

我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素，也可以使用前面的方法，通过JavaScript判断当前硬件屏幕规格，在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。例如，对于手机类设备，可以隐藏掉大块的文字内容区，而只显示一个简单的导航结构，其中的导航元素可以指向详细内容页面。

注意：不要使用visibility:hidden,因为这只能使元素在视觉上不呈现；display:none则可帮助我们设置整块内容是否需要输出。

/* for 980px or less */

@media screen and (max- 980px) {

#pagewrap {

 94%;

}

#content {

 65%;

}

#sidebar {

 30%;

}

}

/* for 700px or less */

@media screen and (max- 700px) {

#content {

 auto;

float: none;

}

#sidebar {

 auto;

float: none;

}

}

/* for 480px or less */

@media screen and (max- 480px) {

#header {

height: auto;

}

h1 {

font-size: 24px;

}

#sidebar {

display: none;

}

}