响应式布局

一、响应式网页

  1. 一个页面，可以根据浏览设备的不同，以及特性的不同，而自动改变布局、大小等

  2. 响应式网页的三个特征

  1）流式网格布局(fluid)
  2）可伸缩的图片和字体
  3）CSS3 Media Query - 根据客户端浏览设备的特性，有选择的执行部分css

  3. 优缺点

 优点：可以自动适配PC/PAD/PHONE浏览器屏幕

 缺点：代码变复杂，需要考虑更多兼容性，并不适合内容非常多的网页

二、如何测试响应式网页

  1、真实物理设备

 优点：测试结构真实可靠
 不足：测试任务量太大

  2、使用第三方软件

 优点：无需添置真实设备
 不足：软件测试效率低，部分功能无法测试，测试结果有待进一步验证

  3、使用浏览器模拟器测试

 优点：测试功能强大，简单易用，
 不足：测试结果有待进一步验证

三、响应式布局必须要清楚的两个概念

1. viewport-视口

   1) 2010年之前，html网页基本都是为pc设计的，宽度比较大,在手机上的显示内容会挤压到一块，后来iOSiOS引入了viewport(视口)的概念，来优化手机上观看网站的体验

   2)  iOS引入了viewport(视口)的概念：用于显示网页内容的一个逻辑概念，其高度和宽度都可以任意制定，网页不是显示在物理窗口，而是显示在视口中-就可以实现大网页不经缩放，直接显示手机中，但需要用户来回滑动

   3) viewport的用法

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

      viewport 可以指定如下属性：

         width:  视口的宽度，可以取值为数值，或device-width(设备的宽度)
         height：视口的高度，一般不指定
         initial-scale：初始时的缩放倍率
         minimum-scale : 允许的最小缩放倍率
         maximum-scale :  允许的最大缩放倍率
         user-scalable : 是否允许用户手动缩放，可取值1/0/yes/no

2. CSS3 media query

  1) 作用：根据客户端浏览设备的特性，有选择的执行部分css

  2) media: 指浏览网页的设备，如screen

  3) Query: 查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩、方向(landscape/portrait)

  4) css3MediaQuery有两种用法

     根据媒体的特性，加载不同的外部css

       <link media="screen and (min-width:990px)" rel="stylesheet" type="text/css" href="css/pc.css"/>

       不足：客户端会不管媒体特性，请求所有的css文件

     根据媒体的特性，执行某段css中的部分内容

       @media screen and (min-width: 990px) {}

四、如何编写响应式网页

1. 在head标签中，声明viewport元标签, 使网页的视口和浏览器的宽高保持一致

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

2. 根据浏览器的不同，加载不同的css文件

    <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="smallScreen.css" />

    <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="tinyScreen.css" />

3. 同一个css文件中，也根据不同的屏幕分辨率，选择应用不同的css规则

    @media screen and (max-device-width: 400px) {

    　　　.column {
    　　　　　　float: none;
    　　　　　　width:auto;
    　　　}

    　　　#sidebar {
    　　　　　　display:none;
    　　　}
    }

4. 注意：

   1) 所有元素的宽不能制定固定值，必须使用相对的宽度值

    width:"60%" 或者 width:"auto"

   2) 字体不能使用绝对大小(px),必须使用相对大小(em)

   3) 布局用的各个区块的位置都是浮动的，不是固定不变的

   4) 除了布局和文本，还必须实现图片的自动缩放,或者根据客户端屏幕的不同，加载不同尺寸的图片

       img {
          max-width:100%;
        }

五、 Bootstrap

 1. 是一个html/css/js框架，适用于移动设备优先的响应式网页

     V2: 面向PC进行了样式设定，同时兼顾pad和phone

     V3: 面向Phone进行样式设定，同时兼顾了PC

     主要涉及：

      HTML: 为H5扩展了一些自定义属性 data-XXX

      CSS: CSS Reset + 几千个class

      JS: 基于JQ提供了十几个插件函数


 2. bootstrap分为五部分

    1. 起步startup

        创建一个bootstrap页面，查看对下述标签进行了哪些样式重置

        html body h1-h6 a img table ul

    2. 全局css样式 global css

        1) 按钮

          bootstrap中常用的五种颜色

             红色->危险
             绿色->成功
             黄色->警告
             浅蓝色->信息
             深蓝色->基础的

          bootstrap中常用的四个大小

             btn-lg -》大
             btn-md -》中
             btn-sm -》小
             btn-xs -》最小

          块级按钮

             btn-block

          调整按钮的位置

             pull-right ->右浮动
             pull-left  ->左浮动

        2) 图片

             img-rounded 圆角
             img-circle 圆形
             img-thumbnail 缩略图
             img-responsive 图片支持响应式布局

        3) 排版和代码，仅作了解

            文本颜色

             text-danger
             text-success
             text-warning
             text-info
             text-primary

            背景颜色

             bg-danger
             bg-success
             bg-warning
             bg-info
             bg-primary

            文本对齐方式
                 
              text-left
              text-right
              text-center
              text-justify

            大小写

              text-lowercase
              text-uppercase
              text-capitalize

        4) 列表

           list-unstyled 去掉列表项样式
           list-inline 将所有元素放在同一行

        5) 表格
            
            bootlint是一个js，由bootstrap官方提供，用于检测使用bootstrap的页面中场景的html错误，class使用方面的错误-默认请求下浏览器检查不出来的

            table

            table-bordered 带边框的

            table-responsive 响应式表格，注意，使用在table的父元素上，而不是table上

            table-striped 隔行变色的表格
            table-hover 带悬停效果的表格

        6) 栅格布局系统

        7) 表单


    3. 组件commponent
    4. 插件plugin
    5. 定制customize

bootstrap示例

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
 <meta charset="utf-8">
 <!--碰到IE浏览器，统一按照win10的edge浏览器标准设置-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--视口设置，和物理屏幕宽一致-->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
 <title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!--HTML5shiv和respond.js是用来让低版本的ie支持html5的新标签和css3 Media Query-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--一种css hack的用法-->
<!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque quae minus maxime natus optio mollitia voluptates corrupti deleniti recusandae. Quas blanditiis accusantium omnis consequatur quisquam ipsa expedita autem molestias?</p>

<button class="btn-warning">测试</button>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

总结

 1.响应式布局就是bootstrap
   错的，是为了更简单的做响应式页面
 2.viewport，是一个逻辑概念，可以设置宽高，用于显示页面
 3.CSS3 Media Query
根据不同情况使用不同的css样式
 4.自己做响应式页面
   设置viewport宽=device-width
   使用CSS3 Media Query加载样式
   注意点：
       浮动，字体设置相对的，width相对的    img-》max-width：100%
 5.bootstrap做响应式
   1）ie兼容
   2）设置viewport
   3）导入关键css文件
       css reset + 上千个类
   4）使用css hack 让低版本的ie兼容html5新标签和CSS3 Media Query
   5）给元素设置类
   6）导入bootstrap的关键js文件