我爱编程

响应式布局 - Bootstrap

2017-02-16  本文已影响0人  云音流

一、响应式网页

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

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

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

  3. 优缺点

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

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

二、如何测试响应式网页

  1. 真实物理设备

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

  2. 使用第三方软件

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

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

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

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

  1. viewport

    1. 2010年之前，html 网页基本都是为 pc 设计的，宽度比较大,在手机上的显示内容会挤压到一块，后来 iOS 引入了 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"

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

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

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

      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

    • 按钮

      bootstrap中常用的五种颜色

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

bootstrap中常用的四个大小

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

块级按钮

   btn-block

调整按钮的位置

   pull-right ->右浮动
   pull-left  ->左浮动
上一篇 下一篇

猜你喜欢

热点阅读