响应式网页

基本语法：

根据设备宽带的变化，设置差异化样式

开发常用写法

@media （媒体特性）{
        选择器{
             样式
         }
}

媒体特性常用写法

1、max-width（从小到大）

2、min-width （从大到小）

完整写法：

@media 关键词 媒体类型 and （媒体特性） { CSS代码 }

外链式CSS引入

<link rel="stylesheet" href="./one.css" media="(min-width:992px)">
<link rel="stylesheet" href="./one.css" media="(min-width:1200px)">

电商站做响应式布局的方式：隐藏内容

Bootstrap

1、Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果

2、中文官网：https：//www.bootcss.com/

使用步骤：

1、引入：Bootstrap提供的CSS代码

<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

2、调用类：使用Bootstrap提供的样式

container：响应式布局版心类

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

1、栅格化是指将整个网页的宽度分成若干等分

2、Bootstrap默认将网页分成12等份

1、.container是Bootstrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

2、.container-fluid也是Bootstrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%。

3、分别使用.row类名和.col类名定义栅格布局的行和列

注意：

1、container类自带间距15px；

2、row类自带间距-15px

手册用法：

1、Bootstrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。

2、网站首页——Boorstrap3中文文档——全局CSS样式——按分类导航查找目标类

使用Bootstrap插件实现常见的交互效果

插件的使用步骤：

1、引入Bootstrap样式

2、引入js文件：jQuery.js+BootStrap.min.js

<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

3、复制HTML结构，并适当调整结构或内容

标签——换样式，在全局css样式里面找

响应式网页适用场景：

门户网站、内容少等

电商站无法做，只能适当缩减部分banner