关于响应式布局的笔记

响应式布局是根据浏览器宽度，分辨率，横屏，竖屏等情况来自动改变元素展示的一种布局方式。会改变布局！

一套代码适配不同的屏幕设备，这就叫响应式网页。

方案一：媒体查询

基本用法：

/* 视口宽度小于等于768px， 网页背景色是粉色 */
@media (max-width: 768px) {
     body {
          background-color: pink;
     }
}

css具有层叠性，所以书写的顺序是：

• min-width(从小到大)
• max-width(从大到小)

外联式CSS引入：

    <!-- 视口宽度 >= 992px，网页背景色为粉色 -->
    <!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
    <link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
    <link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">

方案二：BootStrap

可以使用BootStrap框架快速开发响应式网页。它提供了大量css的样式。

使用步骤：

1.引入：BootStrap提供的css代码 2.调用类：使用BootStrap提供的样式

• container：响应式布局版心类

bootstrap栅格系统

• 栅格化是指将整个网页的宽度分为若干份
• bootstrap3默认将网页分为12等份

需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容

    <div class="container">
        <div class="col-lg-3 col-md-6">1</div>
        <div class="col-lg-3 col-md-6">2</div>
        <div class="col-lg-3 col-md-6">3</div>
        <div class="col-lg-3 col-md-6">4</div>
    </div>

栅格系统相关类：

    <!-- 版心样式:自带左右各15px的padding-left与right -->
    <div class="container">1</div>

    <!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
    <div class="container">
        <div class="row">2</div>
    </div>

    <!-- container-fluid：宽度100%:自带左右各15px的padding-left与right -->
    <div class="container-fluid">3</div>