前端响应式布局

前端响应式布局

前端网页布局分类

♣ 固定宽度布局：以px为单位设置固定的宽度；

♣ 流式布局：以百分比为单位设置相对布局；

♣ 响应式布局：通过检测设备信息，决定网页的布局方式，一般情况下检测设备的宽度来实现(CSS样式中通过‘@media’来实现)

♣ 栅格布局：以百分比为单位将网页划分为均等长度，排版布局时以这些均等长度作为度量单位；

响应式布局

响应式布局的优势

一个网站能够兼容多种设备终端，根据不同的屏幕终端完美展现网站的内容，用户体验得到极大提升。

响应式布局的劣势

为了实现不同的终端屏幕的适配不得不利用媒体查询可很多冗余的代码，增加了网站的体积，在移动设备上可能带来严重的性能问题，不适用交互频繁的页面

使用场景

常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互(与用户操作较少的界面)；

开发原理

♣ 媒体查询：查询媒介，根据查询到当前屏幕的宽度，加载不同的样式来适应不同的屏幕

♣ 实现方式：通过查询screen的宽度来指定某个宽度区间的样式；

分类	尺寸	备注
超小屏幕	(移动设备)	w<768px
小屏设备	768px-992px	768
中等屏幕	992px-1200px	992
宽屏设备	1200px以上	w>=1200

简单案例：

    <style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒体查询：注意and后面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
style>

♣媒体查询详见:什么是HTML5的媒体查询功能

栅格布局

浅谈圣杯布局

♣ 概念：就是一种三列布局，两边定宽，中间自适应。

♣原理：当子元素处于浮动状态时，设置负margin，子元素会叠盖到兄弟元素之上。
利用圣杯布局可以实现一套简单的栅格系统。

♣栅格系统：谈谈栅格布局

Bootstrap的栅格系统

原理

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

♣ “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

♣ 通过“行（row）”在水平方向创建一组“列（column）”。

♣ 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

♣ 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

♣ 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

♣ 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列

♣ 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

♣ 在Bootstrap3中主要把屏幕分成了三种（这里以行（row）来说明）：
.col-xs-* 超小屏幕，手机 (宽度<768px)
.col-sm-* 小屏幕，平板 (宽度≥768px)
.col-md-* 中等屏幕，桌面显示器 (宽度≥992px)

栅格系统的意义

简单来说，栅格系统就是规定了界面中每列所占据的宽度，bootstrap中的column的宽度被事先规范好了。它可以规范在不同的屏幕尺寸下当前列占据的宽度和一行放几列(最多十二列);

<div class="row">
   <div class="col-md-1">.col-md-1div>
   <div class="col-md-1">.col-md-1div>
   <div class="col-md-1">.col-md-1div>
   <div class="col-md-1">.col-md-1div>
   <div class="col-md-1">.col-md-1div>
   <div class="col-md-1">.col-md-1div>
    <div class="col-md-1">.col-md-1div>
    <div class="col-md-1">.col-md-1div>
   <div class="col-md-1">.col-md-1div>
   <div class="col-md-1">.col-md-1div>
   <div class="col-md-1">.col-md-1div>
   <div class="col-md-1">.col-md-1div>
div>
------------------------------------------------
<div class="row">
   <div class="col-md-8">.col-md-8div>
   <div class="col-md-4">.col-md-4div>
div>
------------------------------------------------
<div class="row">
   <div class="col-md-4">.col-md-4div>
   <div class="col-md-4">.col-md-4div>
   <div class="col-md-4">.col-md-4div>
div>
------------------------------------------------
<div class="row">
   <div class="col-md-6">.col-md-6div>
   <div class="col-md-6">.col-md-6div>
div>

兼容性

♣栅格系统是向上兼容的：小屏幕的样式是可以在大屏幕上正常显示的，但是大屏幕上的样式无法在小屏幕上正常显示。

♣行可以再次嵌套在列中。如果不能填满整列，则默认从左排列，如果超出，则换行展示;

♣ Bootstrap栅格系统详见：Bootstrap响应式布局

规范

媒体查询

♣屏幕尺寸分为四档：分别为w<768px，768

 <style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒体查询：注意and后面空格的添加*/
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }


style>

参考文档

♣Bootstrap官方文档

♣ 响应式布局与Bootstrap框架

♣ 谈谈栅格布局

Bootstrap 工具(设计)

♣ Bootstrap栅格化布局系统