BOOTSTRAP DAY01

一、Bootstarp
  官网：http://www.getboostrap.com/
  中文网站：http://www.bootcss.com/
  1.响应式布局
    1.什么是响应式网页
      Responsive web page:响应式网页，可以根据浏览器设备的不同(pc/pad/phone)而自动的更改布局，
      图片文字效果，不会影响用户的浏览体验。
    2.响应式网页必须做到
      1.布局：不能固定宽度，必须是流式布局
      2.文字和图片大小随着容器大小而改变
      3.使用媒体查询
        响应式网页存在的问题：代码的复杂度大大提升，只适用于内容不太多的页面
    
    3.如何测试响应式网页
      1.方式1：使用真实设备测试
         好处：测试效果真实可靠
     不足：测试任务量较大
      2.使用第三方的模拟测试软件
     好处：无需添置太多真实设备，方便测试
     不足：测试效果有限，有待进一步测试
      3.使用Chrome等浏览器自带模拟设备
         好处：简单方便
     不足：测试效果有限，必须进一步验证
 
    4.如何编写响应式网页
      1.声明元标签(viewport-手机适配)
        <meta name="viewport"
    content="width"=device-width,
    initial-scale=1.0,maximum-scale=1.0,
    user-scalable=0">
    viewport元标签：
      早期3G手机为了浏览大尺寸的网页，只能强行把网页缩小，导致文字，图片等变小
      ios提出了"视口"，视口用于盛放网页内容，超过部分，滑动显示。Android也借用了此概念。
      width=device-width 表示视口的宽度就是设备的宽度
      initial-scale=1.0 表示视口是否缩放，1.0不缩放
      maximum-scale=1.0 允许用户缩放的最大倍率
      minimum-scale=1.0 允许用户缩放的最小倍率
      user-scalable=0 是否允许用户手动缩放，取值可是yes/no/1/0
       2.所有的容器/文本/图片 使用相对尺寸不使用绝对尺寸
         ex:
       div{
        /*width:1000px;*/绝对值
        width:100%;  //相对值
        /*font-size:24px;*/ 绝对值
        font-size:1rem; 相对值
       }

       3.流式布局+弹性布局
         实现方法：float+flex
       4.使用CSS3媒体查询技术---这是响应式布局必须条件
         media：媒体，指的是浏览网页的设备，如screen(pc/pad/phone),tv,print(打印机)
     media query：媒体查询，可以自动根据当前设备类型的不同，或者特性(方向，尺寸，解析度)不同，
                  有选择器的执行部分的css样式，忽略其他部分
              媒体查询的两种使用方法：
                 (1)根据媒体查询结果使用不同的外部css文件
             <meta name="viewport" content="width=device-width,initial-scale=1.0" >
             <link media="screen and (min-width:992px)" rel="stylesheet" href="pc.css">
             <link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="pad.css">
             <link media="screen and (max-width:767px)" rel="stylesheet" href="phone.css">
             注意：此方法较少用，所有css都会被浏览器加载，每个css文件中可能会存在重复代码。
            (2)根据媒体查询的结果执行同一个css文件中的不同代码块。
             @media screen and (min-width:992px){
                     选择器{样式}
                    }