响应式布局

响应式布局

响应式网页：在不同的屏幕尺寸下，页面的布局出现不同的效果（一套代码兼容多个样式的网页）

核心：媒体查询

媒体特性常用写法：max-width（<=）、min-width(>=)

// 视口宽度 小于等于768px
@media(max-width:768px) {
    body {
        background-color:pink;
    }
}

// 视口宽度 大于等于px
@media(min-width:1200px) {
    body {
        background-color:pink;
    }
}

书写顺序：

受层叠性的影响：min-width：从小到大

max-width：从大到小

关键词：and、only、not （了解）

单独设置某个区间

@media(min-width:768px) and (max-width:1200px){
    body {
        background-color:pink;
    }
}

媒体查询：link引入方式

    <!-- 视口宽度 >= 992px，网页背景色为粉色 -->
    <!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
    <link rel="stylesheet" href="路径" media="(min-width992px)">
    <link rel="stylesheet" href="路径" media="(min-width1200px)">

媒体查询-隐藏

 //如果检测到视口宽度小于768px, 认为是手机端, left隐藏 
 @media (max-width:768px) {
           .left {
               display: none;
           }
       }

BootStrap 框架

使用BootStrap框架快速开发响应式网页

简介：前端UI框架，大量编写好的CSS样式

中文官网：https://www.bootsheet.com/

使用步骤：

1、引入：

 <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
 <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">

2、调用

container ：响应式布局版心类

使用BootStrap栅格系统布局响应式网页

默认网页等分成12等份

超小屏幕 小屏幕 中等屏幕 大屏幕

<768px >=768px <=992px >=1200px

xs sm md lg

版心宽度 100% 750px 970px 1170px

类前缀 col-xs-* col-sm-* col-md-* col-lg-*

列数 12 12 12 12

列间隙 30px 30px 30px 30px

栅格系统的版心：

注意：1、container类自带间距15px

2、row类自带间距 - 15px (抵消父级container15px的内边距)

container - fluid 通栏效果，自带左右15px 的内边距

BootStarp其他组件作用：

全局CSS样式：设置单独标签样式

组件：区域样式

JS插件：交互效果

定制

字体图标：用法类似iconfont图标的使用，引入JS文件后，直接复制类名使用

JS插件实现常见的交互效果：

1、引入BootStrap样式

2、引入JS文件：(顺序) jQuery.js + BootStrap.min.js

3、复制框架提供的代码，修改内容