响应式布局

响应式布局就是网页能够响应各种各样不同分辨率大小的设备 

body {background-color: #ccc;}
@media screen and (max-width: 1000px) {
       body {background-color: blue;}
}
@media screen and (max-width: 800px) {
       body {background-color: red;}
}
@media screen and (max-width: 600px) {
      body {background-color: black;}
}
@media screen and (max-width: 400px) {
      body {background-color: green;}
}

把这段css代码添加到你的网页中，然后缩小浏览器，你会发现网页的颜色会伴随着你的浏览器宽度变化而变色，这就是css的媒体查询功能，根据浏览器视口宽度的不同来加载不同的css样式。

这样就是表示只有视口宽度大于800像素的屏幕设备才会加载800wide这个css文件。

 

bootstrap 

1.  

   需要引入三个文件：bootstrap.min.css、jquery.min.js、bootstrap.min.js，第五行的标签是用来支持移动设备响应式布局的。

   需要特别注意的是，jquery.min.js文件必须放在bootstrap.min.js之前，因为bootstrap的js组件依赖jQuery。

   当然了，如果你不用bootstrap的js组件，只要响应式布局，只需要引入bootstrap.min.css就可以了。

 

 

1.当你完成当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的 代码到和标签之间。这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器 提供网站全视图浏览，并禁止用户缩放页面。

user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

2.通过媒体查询来设置样式media query

media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现， 假如一个终端的分辨率小于980px，那么可以这样写

@media screen and (max-width:980px){
                    #head { … }
                    #content { … }
                    #footer { … }
}
这里面的样式会覆盖掉之前所定义的样式。

3.设置多种视图宽度  假如我们要兼容ipad和iphone视图，我们可以这样设置：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}

/**iphone**/
@media only screen and (width:320px)and (width:768px){} 1

字体设置
到目前为止，开发人员用到的字体单位大部分都是像素，虽然像素在普通网站上是Ok的，但 是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度，这样才能适应客 户端屏幕。

css3引入了新的单位叫做rem,和em类似但对于Html元素，rem更方便使用。rem是相对于根元素的，不要忘记重置根元素字体大小：

html{font-size:100%;}
完成后，你可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

4.响应式设计需要注意的问题
  1.宽度不固定，可以使用百分比

     #head{width:100%;}
     #content{width:50%;} 1

在html页面中的图片，比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的 最大宽度，如：
#wrap img{
        max-width:100%;
        height:auto;
}
如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

#log a{
        display:block;
        width:100%;
        height:40px;
        text-indent:55rem;
        background-img:url(logo.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
}
background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么 background-size:cover; 等比扩展图片来填满元素 background-size:contain; 等比缩小图片来适应元素的尺寸