本文介绍了响应式布局的多种实现方式，包括HTML的viewport标签、CSS媒体查询@media的使用，以及通过设置字体rem和利用第三方框架（如Bootstrap）来实现响应式设计。详细讲解了@media查询的语法和实例，展示了不同屏幕尺寸下背景颜色的变化。
今天考试，有个问题是响应式布局的实现，当时心里想了一会，就想到flex布局，后面网上搜了搜，发现方法挺多的，写个日记。
1.html代码的头部就有标签来实现响应式布局
<!--定义了响应式-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport是网页默认的宽度和高度。网页宽度默认等于屏幕宽度，原始缩放比例为1.0，即网页初始大小占屏幕面积的100%。
2.使用css媒体查询@media
（1）直接在css文件中使用
@media 类型 and (条件1) and （条件2）
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询</title>
<style>
.box{
height: 100px;
}
@media screen and (max-width:768px) {
.box{
background-color: blueviolet;
}
}
@media screen and (min-width:768px) and (max-width:992px){
.box{
background-color: chartreuse;
}
}
@media screen and (min-width:992px) and (max-width:1200px){
.box{
background-color: darkorange;
}
}
@media screen and (min-width:1200px){
.box{
background-color: darkturquoise;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
（2）使用@import导入
（3）使用link连接，media属性用于设置查询方式
详情来源CSS3 媒体查询@media 查询（响应式布局） - vickylinj - 博客园
资料来源：用CSS实现响应式布局 - vickylinj - 博客园
3.直接设置字体rem（相对于html字体的大小）
4.借助第三方开源框架（如bootstrap等等）
扫一扫
4550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
