响应式布局

一、响应式网页

  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的用法

      

      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

       

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

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

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

四、如何编写响应式网页

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

    

2. 根据浏览器的不同，加载不同的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示例

 
 
 
 
 
 
 
 
 
 













你好，世界！

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?

测试

总结

 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文件