Bootstrap 响应式框架 第一集

Bootstrap 框架 , 响应式

1、什么是响应式

响应式：Responsive Web Page，又称为自适应网页，一个页面既可以在PC浏览器中正常访问，也可以在手机/平板中正常访问。而且会配合不同的设备有不同的显示结果。

响应式网页的特点：

1、页面上的图片和文字要随着屏幕的尺寸而发生改变

2、页面的布局也会随着屏幕的尺寸而发生变化

2、如何测试响应式的网页

1、使用真实的物理设备

优势：测试结果真实可靠

不足：设备太多，成本太大，测试任务量大

2、使用第三方的模拟设备

优势：无须添加更多设备

不足：效率偏低，会有结果偏差

3、使用浏览器自带的设备模拟器(Emulator)

优势：简单，功能丰富

不足：会有结果偏差

3、视口 - Viewport

IOS中的Safari中提出的概念

在移动设备中，浏览器里显示网页的一块区域(PC端会忽略此概念)

视口的尺寸：

1、在IE中 ：宽度是 1024px

2、非IE中 ：宽度是 980px

对于响应式的网页，要设置的视口信息如下：

1、视口的宽度：与设备的物理宽度保持一致

2、视口的初始化缩放倍率：原始大小(不缩放显示)

3、不允许用户手动缩放视口的大小 ：不允许手动缩放网页

在HTML中指定视口信息：

<meta name="viewport" content="">

1、视口的宽度 : width

取值：

1、device-width

2、具体数值

2、视口的初始化缩放倍率：initial-scale

取值：

以数字来表示缩放倍率

取值为 1 的话，表示原始大小显示

3、手动缩放视口大小：user-scalable

取值：

1/0/yes/no

1 和 yes ：表示允许手动缩放视口大小

0 和 no ：表示不允许手动缩放视口大小

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

以上代码，移动端响应式必备!!!

4、如何编写响应式网页(重点)

1、必须声明视口(已解决)

2、文字尽量使用相对尺寸(em,rem)，尽量不用绝对尺寸(px,pt)

em:使用当前元素父元素文字大小的倍数

rem:使用当前网页根元素(html)定义的文字大小的倍数

3、容器元素尽量使用相对尺寸(%,auto),尽量不用绝对尺寸(px)

4、图片元素尽量使用相对尺寸(%,auto),尽量不用绝对尺寸(px)

img{

width:50px;/*不推荐：绝对尺寸*/

width:50%;/*推荐：占父元素宽度的50%*/

max-width:50%;/*推荐：占父元素宽度的50%，但最大不能超过图像本身的大小*/

}

ex:

1.jpg 的图像 100px * 100px ，将其放在 80px*80px 元素内，将 1.jpg 的max-width:50%;的话，1.jpg 显示宽度 40px * 40px

如果将1.jpg 放在 800px * 800px 元素内，将1.jpg 的max-width:50%;的话，1.jpg显示宽度为 100px*100px

如果将1.jpg 放在 800px * 800px 元素内，将1.jpg 的width:50%;的话，1.jpg显示宽度为 400px*400px

5、页面元素尽量使用流式布局

流式布局的特点：

1、元素默认是靠向容器的左上方开始排列的

2、横向排列，排列不下时则换行

方法1:float

方法2:display:inline-block;

方法3:弹性布局 要 配合着 flex-wrap:wrap;

6、响应式网页都要使用CSS3 Media Query的技术来判断设备的尺寸 - 最重要

ex:

1、设备的宽度 w <= 767px 背景色 红色

2、设备的宽度768px<=w<=991px背景色 绿色

3、设备的宽度w>=992px 背景色为 粉色

5、CSS3 Media Query

CSS3 媒体查询技术

作用：可以根据不同的媒体类型以及特性去执行不同的CSS

语法：

通过 @media 的规则进行声明

@media MEDIA-TYPE and (MEDIA-FEATURE) and (MEDIA-FEATURE)

MEDIA-TYPE : 媒体类型

取值：

1、all，默认值，表示所有设备

2、screen ：屏幕(PC , PAD , PHONE)

3、tv ：电视设备

MEDIA-FEATURE : 媒体特性(属性)

取值：

1、width ：指定浏览器宽度大小

2、min-width ：判断指定浏览器窗口宽度最小值

3、max-width ：判断指定浏览器窗口宽度最大值

ex:

1、在屏幕(PC,PAD,PHONE)下,宽度在767px以内，将body的背景色改为 红色

@media screen and (max-width:767px){

body{

background:red;

}

h1{

font-size:1.5em;

}

}

2、在屏幕(PC,PAD,PHONE)下,宽度在768~991之间，将body的背景改为 绿色

@media screen and (min-width:768px) and (max-width:991px){

body{

background:green;

}

h1{

font-size:1.8em;

}

}

3、在屏幕(PC,PAD,PHONE)下,宽度在992px以上，将body的背景色改为 粉色

@media screen and (min-width:992px){

body{

background:pink;

}

h1{

font-size:2em;

}

}

@media 具体使用：

1、有选择性的执行CSS片段中的内容

<style>

@media screen and (min-width:768px){

}

@media screen and (max-width:767px){

}

</style>

2、有选择性的执行某个外部CSS文件

<link rel="" href="1.css" media="screen and (min-width:768px)">

当屏幕的尺寸在768px以上时，执行1.css中的内容

不足：即使不满足当前设备条件的CSS也会被请求，但不会被执行