Bootstrap 响应式网页设计
响应式网页设计的步骤：
1.设置<meta>标签
2.使用媒体查询设置样式
3.字体设置
4.第三方框架
一、视口
视口Viewport：
移动端中存在的三种视口：布局视口、视觉视口、理想视口
设置布局视口宽度与理想视口宽度保持一致
<meta name="viewport" content="width=device-width">
表示：
视口宽度为屏幕宽度，缩放比例为1:1，初始视觉视口就是理想视口
<meta>标签的主要作用是使布局视口宽度与理想视口宽度一致
也就是设备屏幕有多宽，布局视口就有多宽
<meta>标签常用的属性：
width 用于设置布局视口的宽度，可指定固定值， 如600px 也可指定特殊值 如 device-width 设备的宽度
height 视口高度 可以设置为数值或 device-height
initial-scale 设置页面初始缩放比例，即页面第一次加载时的缩放比例
minimum-scale 设置允许用户缩放页面的最小比例
maximum-scale 设置允许用户缩放页面的最大比例
user-scalable 设置用户是否可以手动缩放 yes/no
二、媒体查询
媒体查询：
设置方式3部分：媒体类型/判断条件/媒体属性
media 媒体类型 判断条件 (媒体属性) {css样式}
实例：
屏幕宽度在768px及以上，使用<CSS样式1>，屏幕宽度在480px及以上，使用<CSS样式2>
media screen and (min-width: 768 px) {CSS样式1}
media screen and (min-width: 480 px) {CSS样式2}
媒体查询的使用方法：
1、加入
<meta name="viewport" content="width=device-width",initial-scale=1,
maxinum-scale=1.0, user-scalable="no">
2、使用方式
样式表中使用：
/*当设备屏幕宽度为420～600px时，显示背景图片1.jpg*/
@media screen and (max-width: 600px) and (min-width: 420px) {
header{ background-image: url(./1.jpg);}
}
如果在link标签中使用：
/*当设备屏幕宽度小于或等于420px时，加载Demo.css外部样式表*/
<link rel="stylesheet" type="textcss"
media="screen and (max-device-width: 420px)" href="Demo.css">
媒体类型：
常用类型all 和 screen print
媒体类型说明：
all 所有设备
braille 盲文
handheld 手持设备
print 文档打印或打印预览模式
screen 彩色屏幕
判断条件：
媒体查询语句中加入and not only 进行条件判断
1、and
满足单一条件：
/* 当设备屏幕宽度小于或等于420px时，显示div背景颜色为蓝色 */
@media screen and (max-width:420px) {
div{ backgroud-color:blue; }
}同时满足两个条件：
/* 当设备满足在400px - 600px 之间时*/
@media screen and (max-width:600px) and (min-width:400px) {
div{ background-color:red; }
}
两个中满足其中1个即可，使用逗号分隔，或运算
/* 当设备屏幕宽度小于或等于420px或在打印模式下且纸张宽度最小为10英寸时，显示div背景颜色为黄色 */
@media screen and (min-width:700px), print and (min-width:10in) {
div{
background-color:yellow;
}
}
2、not
对媒体查询取反
not 不能再单个条件前使用
not 应位于媒体查询语句的开头
not 关键字用于对整个媒体查询语句进行取反，并非仅对某一个媒体属性取反
/* 单色屏幕设备不会应用相关CSS样式，除单色屏幕设备外的所有设备会应用相关CSS样式 */
@media not screen and (monochrome) {
div { background-color: pink; }
}
3、only
兼容低版本的浏览器而设置
必须位于媒体查询开头
/* 早期浏览器隐藏媒体查询语句 */
@media only screen and (min-width:600px) {
div { background-color: green; }
}
媒体属性
常见媒体属性：
max-height
max-width
color
device-height
device-width
height
monochrome
resolution / yes 分辨率
scan/ no 媒体类型扫描方式
width / yes 渲染页面宽度
orientation / no 横屏或竖屏
基础实例：响应式图片背景
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <meta name="viewport" content="width=device-width" ,initial-scale=1, maxinum-scale=1.0, user-scalable="no">
6. <title>响应式图片</title>
7. </head>
8. <style>
9. *{
/* 重置样式 */
10. margin: 0;
11. padding: 0;
12. border: 0;
}
body,html {
/* 设置body、html占满全屏 */
14. height: 100%;
15. width: 100%;
16. box-sizing: border-box;
}
#box {
/* 设置父容器宽度100% */
18. width: 100%;
19. height: 100%;
}
20. img {
/* 图片默认占据屏幕的1/3 */
21. width: 33%;
22. float: left;
}
23. @media screen and (max-width : 500px) {
/* 图片与屏幕等宽 */
img {width: 100%;}
25. }
26. </style>
27. <body>
28. <div id="box">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
32. </div>
33. </body>
34. </html>