如何创建响应式布局？

2021-02-26 10:30:15

发布：阿里云代理商凯铧互联

第303题：如何创建响应式布局？
响应式布局是通过@media实现的
@media （min-width：768px）{
.pg-header{
background-color:green;
}
}
@media (min-width:992px){
.pg-header{
background-color:pink;
}
}

代码
<!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">
<title>Title</title>
<style>
body{
margin: 0;
}
.pg-header{
background-color: red;
height: 48px;
}

@media (min-width: 768px) {
.pg-header{
background-color: aqua;
}
}
@media (min-width: 992px) {
.pg-header{
background-color: blueviolet;
}
}
</style>
</head>
<body>
<div class="pg-header"></div>
</body>
</html>

郑重申明

本套试题阿里云云计算认证acp真题来源于互联网，如果不小心侵犯了您的权益，请及时联系站长处理。

-阿里云优惠首选凯铧互联免费提供专家1V1技术服务,大客户首选服务商,优惠购买阿里云服务器、阿里云数据库、阿里云高防等折扣购买,如果您是工作时间以外的时间需要服务，请加微信号158-0160-3153，当然了，这个微信号也是手机号，可以随时拨打！

凯铧互联微信号