css任务八、 九总结

bootstrap的特点有很多，我们先列举出来各个特点，接下来再详细介绍各个特点的好处。

      1）扩设备、跨浏览器

      2）响应式布局

          简单说：一个网站能够兼容多个终端，比如我们只做的网站能够兼容PC端、Android手机、苹果手机

          等，可以为不同的用户提供更舒适的界面和更好的用户体验。

      3）提供全面的组件

      4）内置Jquery插件

          bootstrap中内置jquery插件，这样使程序员使用jquery更加简单方便，便于开发。

      5）支持HTML5、CSS3

      6）支持LESS动态样式

          LESSCSs是一种动态是一种动态样式语言，属于CSS预处理语言，使用类似CSS的语法，为CSS赋予了

          动态语言的特点，如变量、集成、运算、函数等，更方便CSS的编写和维护。可以很方便的使用。

媒体查询

1. 最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：
@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}
上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。
2.最小宽度min-width
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。
@media screen and (min-width:900px){
.wrapper{max-width: 980px;}
}
上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的最大宽度为980px。

3关于media媒体查询不生效的问题原因总结
1.and  后面一定要有空格~~~  切记

2.meta 里面需要加上一句话：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3.代码写错了，选择器写错了，样式备覆盖了·等等低级问题，可以先在里面，写个简单的并且绝对会生效的额，先看控制台里面有没有这些media关于尺寸样式代码，如果尺寸代码有，那么，你肯定哪里写错了，细心的找找吧~~~

• horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
• vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
• vertical-lr：垂直方向内内容从上到下，水平方向从左到右
• sideways-rl：内容垂直方向从上到下排列
• sideways-lr：内容垂直方向从下到上排列