一、屏幕划分
二、使用方式 (通过@media改变布局的样式)
书写方式有层叠型：min-width(数值从小到大写)，max-width(数值从大到小写)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100%;
height: 600px;
background-color: pink;
}
/* 超小屏幕 */
/* 简写
@media (max-width: 768px){
.box{
background-color: aqua;
}
}
*/
@media screen and (max-width: 768px){
.box{
background-color: aqua;
}
}
/* 小屏幕*/
@media screen and (min-width: 768px) {
.box{
background-color: brown;
}
}
/* 中等屏幕 */
@media screen and (min-width: 992px) {
.box{
background-color: chartreuse;
}
}
/* 大屏幕 */
@media screen and (min-width: 1200px){
.box{
background-color: black;
}
}
</style>
</head>
<body>
<!-- 响应式开发里面，首先需要一个布局容器 -->
<div class="box"></div>
</body>
</html>
402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
