本文主要是介绍Bootstrap边学边记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、响应式布局页面
1.响应式网页（Responsive Web Page）
概念：一个网页，可以在各种不同的浏览终端下加以显示，并能够根据浏览终端的不同而呈现出不同的样式。
响应式网页需要注意下面三个部分：
(1)采用流式布局(Fluid 流式、流动式、液态)
(2)可伸缩的图片、文字
(3)CSS MediaQuery技术，根据浏览设备的宽和高调用不同的css
2.如何编写响应式网页
(1)在HEAD标签中声明 viewport元标签
<meta name="viewport"
content="width=device-width,initial-scale=1,user-scalable=0">
(2)元素的宽使用%，而不要用px
width:50%
(3)字体大小使用相对值，如%、em，而不要用px
font-size: 100%; font-size: .75em ;
(4)流式布局，使用浮动定位
float:left; float: right;
(5)图片的自动缩放
max-width:xx%; 自适应父容器的空间，但有一个最大值(图片的原始大小)
此外，还可以使用js修改<base>的href属性值，针对不同的浏览器，指定不同的图片加载路径
(6)CSS MediaQuery，使用媒体查询加载不同的CSS文件
(7)CSS MediaQuery，使用媒体查询执行不同的CSS属性
Viewport：由Apple在iOS中最新引入该元标签，视口，手机中浏览器的显示窗口的大小，一般要远大于手机屏幕大小，HTML中可以指定此视口的大小。可以指定如下属性：
width: 视口的宽度，可以取值为数值，或device-width
height：视口的高度，一般不指定
initial-scale：初始时的缩放倍率
minimum-scale: 允许的最小缩放倍率
maximum-scale: 允许的最大缩放倍率
user-scalable: 是否允许用户手动缩放，可取值1/0/yes/no
3.CSS MediaQuery
CSS媒体查询技术，除了IE8-不支持，其它浏览器都支持。
CSS Media Query技术有两个功能：
(1)根据浏览设备的不同，加载不同的外部CSS文件
<linkrel="" media="" href="">
(2)根据浏览设备的不同，执行不同的CSS块
如base.css:
@mediascreen and (min-width: 1000px){
.container{
}
.footer{
这篇关于Bootstrap边学边记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
