响应式布局
1.什么是响应式布局
- 一个网站可以适应多个终端,而不是为每一个终端去开发一个版本
2.@media （媒体查询）
2.1 语法
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
2.2 语法结构
-
媒体类型（mediaType ）
值 描述 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，智能手机等。（最常用） speech 应用于屏幕阅读器等发声设备 -
媒体功能（media feature）
值 描述 max-width 定义输出设备中的页面最大可见区域宽度 min-width 定义输出设备中的页面最小可见区域宽度 -
屏幕尺寸（screen）
类型 值 手机 (<768px) 平板 (≥768px) 桌面显示器 (≥992px) 大屏显示器 (≥1200px) -
引入方式
-
在
link标签中判断设备的尺寸，然后引用不同的css文件<!-- 当宽度小于800px的时候 加载example.css文件 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> -
另一种方式，直接写在
style标签里或css文件里/* 当屏幕宽度小于600px的时候 header标签隐藏 */ @media screen and (max-width:600px) { header { display: none; } } -
推荐写在css文件里，减少http请求次数，提高网页性能。
-
2.3 如何使用
-
设置
meta标签首先我们在使用
@media的时候需要先设置下面这段代码，来兼容移动设备的展示效果<meta name="viewport" content="width=device-width, initial-scale=1.0">-
width=device-width宽度等于当前设备的宽度 -
initial-scale=1.0初始的缩放比例（默认设置为1.0，即代表不缩放） -
user-scalable用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
-
-
加载兼容文件
因为
IE8既不支持HTML5也不支持CSS3 @media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> -
设置IE渲染方式默认为最高(可选)
现在有很多人的IE浏览器都升级到
IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8为了防止这种情况，我们需要下面这段代码来让IE的文档渲染模式永远都是最新的<meta http-equiv="X-UA-Compatible" content="ie=edge">-
content="ie=edge"告诉IE使用最新的引擎渲染网页
-
3. 用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 去除浏览器默认样式 */
* {
margin: 0;
padding: 0;
}
/* 一个高度为100px的盒子 */
header {
height: 100px;
background: purple;
}
/* 当浏览器宽度小于768px的时候 header的背景色变为红色 */
@media screen and (max-width:768px) {
header {
background: red;
}
}
/* 当浏览器宽度大于768px小于992px时 header的背景色变为天蓝色 */
@media screen and (min-width: 768px) and (max-width: 992px) {
header {
background: skyblue;
}
}
/* 当浏览器宽度大于1200px时 背景色为粉红色 */
@media screen and (min-width:1200px) {
header {
background: pink;
}
}
</style>
</head>
<body>
<header> </header>
</body>
</html>
4.总结
到这里媒体查询的知识点也讲完了（都是工作中常用的，如需了解更多，需自行百度），做了一个简单的小案例 。顺便的给大家几条建议
- 千万不要忘记设置
meta标签，如果忘了写，浏览器是不识别媒体查询代码的； - 媒体查询采用流式布局，站手机端的100%；
- pc端网页能不给元素设定固定宽高就不要设，这样易于维护；
网友评论