媒体查询
<!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>Document</title>
</head>
<style>
@media only screen{
body{
background-color: aquamarine;
}
}
</style>
<body>
<!-- 响应式布局
网页可以根部不同的设备或窗口大小呈现出不同的效果
使用响应式布局。可以使一个网页适应于所有设备
相应布局的关键就是 媒体查询
通过媒体查询,可以为不同的设备,或设备不同状态来分别设置样式
-->
</body>
</html>
媒体特性
<!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>Document</title>
</head>
<style>
@media(min-width:500px)and(max-width:700px) {
body{
background-color: antiquewhite;
}
}
</style>
<body>
</body>
</html>
美图html
<!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>
<link rel="stylesheet" href="../css重置样式表/reset.css">
<!-- 这个地方记住,一定是引入的css文件 -->
<link rel="stylesheet" href="./css/syntax.css">
<link rel="stylesheet" href="../font/css/all.css">
</head>
<style>
</style>
<body>
<div class="topbar-wrapper">
<!-- 设置顶部容器 -->
<div class="topbar">
<!-- 设置左侧菜单导航 -->
<div class="left-menu">
<ul class="menu-icon">
<!-- 图标不能实现动画,所以用另外一种方法 -->
<li></li>
<li></li>
<li></li>
</ul>
<ul class="nav">
<li><a href="javascript:;">手机</a></li>
<li><a href="javascript:;">美容仪器</a></li>
<li><a href="javascript:;">配件</a></li>
<li><a href="javascript:;">服务支持</a></li>
<li><a href="javascript:;">企业网站</a></li>
<li><a href="javascript:;"><i class="fas fa-search"></i></a>
<span>搜索Meitu.com</span>
</li>
</ul>
</div>
<!-- 设置中间logo -->
<div class="logo"><a href="#">tupian</a></div>
<!-- 设置右侧用户信息 -->
<div class="user-info">
<a href="javascript:;"><i class="fas fa-user"></i></a>
</div>
</div>
</div>
</body>
</html>
美图less
a{
color: #fff;
&:hover{
color: rgb(197, 190, 190);
}
}
.topbar-wrapper{
background-color: #161515;
}
.topbar{
max-width: 1200px;
margin: 0 auto;
width: 100%;
height: 48px;
background-color: black;
color:white;
padding: 0 14px;
display: flex;
justify-content: space-between;
}
.left-menu {
.nav{
display: none;
top:48px;
position: absolute;
background-color: black;
left: 0;
right:0;
bottom: 0;
padding-top: 60px;
li{
width: 80%;
margin: 0 auto;
border-bottom: 1px solid #161515;
a{
display: block;
line-height: 44px;
font-size: 14px;
}
&:last-child a{
display: inline-block;
margin-right: 6px;
}
}
}
.menu-icon{
width: 18px;
height: 48px;
position: relative;
li{
width: 18px;
height: 1px;
background-color: white;
position: absolute;
transform-origin: left center;
transition: 0.5s;
}
li:nth-child(1){
top:18px;
}
li:nth-child(2){
top:24px;
}
li:nth-child(3){
top:30px;
}
&:hover{
li:nth-child(1){
transform: rotateZ(40deg);
}
li:nth-child(2){
opacity: 0;
}
li:nth-child(3){
transform:rotateZ(-40deg);
}
}
}
&:hover{
.nav{
display: block;
}
}
}
.logo{
a{
text-indent: -999px;
display: block;
height: 44px;
width: 160px;
background-image: url(../picture/meitu.png);
background-size: 160px 44px;
}
}
.user-info i{
font-size: 18px;
padding-top: 13px;
color: aqua;
}
@media only screen {
@media (min-width:768px) {
.left-menu{
flex:auto;
order: 2;
.nav{
display: block;
position: static;
display: flex;
padding: 0;
li{
width: auto;
border-bottom: none;
a{
line-height: 48px;
}
span{
display: none;
}
}
}
.menu-icon{
display: none;
}
}
.logo{
order: 1;
}
.user-info{
order: 3;
}
}
}