前端自学笔记7：响应式网页

1、响应式网页效果

同一个网页可以适配不同尺寸的屏幕。

2、媒体查询

根据设备宽度的变化，设置不同的样式。

写法一：

在style中设置：

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

例如，利用最大和最小宽度设置区间：

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

• 注意，css具有层叠性，需要按照宽度顺序设置css样式

@media (min-width:768px) {
   body {
       background-color: pink;
   }
}/*这里设置宽度大于768的网页背景色为粉色*/
@media (min-width:992px) {
   body {
       background-color: green;
   }
}/*这里设置宽度大于992的网页背景色为绿色*/
@media (min-width:1200px) {
   body {
       background-color: skyblue;
   }
}/*这里设置宽度大于1200的网页背景色为蓝色*/

• 以上的写法是简洁写法，完整写法：

@media 关键词 媒体类型 and (媒体特性) {css代码}

• 关键词包括 and（两个条件） only（一个条件） not（非）
• 媒体类型包括 screen（带屏幕的设备）、print（打印预览模式）、speech（屏幕阅读模式）、all（默认包括以上3种情形）
• 媒体特性包括：

特性名称	属性	值
视口宽或高	width、height	数值
视口最大宽或高	max-width、max-height	数值
视口最小宽或高	min-width、min-height	数值
屏幕方向	orientation	portrait:竖屏；landscape：横屏

写法二

外链式引入：

<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
#这里表示网页宽度超过992px时，引入样式表one.css；网页宽度超过1200px时，引入样式表two.css

3、BootStrap

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

BootStrap使用步骤

• 下载：中文官网：https://www.bootcss.com
  
  
  
• 使用:

①引入：BootStrap提供的css代码

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

②调用类：使用BootStrap提供的样式
比如：

• .row 和 .col 定义栅格格局的行和列；
• 类container，表示版心，默认已被指定宽度且居中，自带内间距15px；
• .container-fluid，表示居中排列，宽度为100%；
• row类自带外间距-15px（可以抵消.container的左右15px的padding）。

③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

④BootStrap水平排列是通过浮动实现的

4、如何通过BootStrap设置想要的样式

①打开BootStrap官网的中文文档
②点击 全局CSS样式，根据右侧分类，找到对应元素的效果，复制类名到自己代码中。

例如：
默认表格样式：

根据bootstrap全局CSS样式中显示的样式，选择想要的样式对应的类名，复制到自己代码：

将 .table 设置到自己代码后，表格样式为：

③或者在 组件 中，寻找字体图标、导航、搜索栏、下拉菜单、分页等区域。
例如，寻找下拉菜单想要的样式，直接复制代码并修改相关内容。


字体图标使用：首先html页面引入bootstrap样式文件，然后空标签调用相对应的类名。


④或者在JavaScript插件中，寻找交互效果。在右侧导航栏寻找相应的插件。
步骤：引入bootstrap样式；引入js文件（jQuery.js+BootStrap.min.js）