极客观点
项目管理
HarmonyOS
@media screen and (min-width: 1024px) and (min-height: 768px){
}
大家好。我的屏幕分辨率是1024px 和 768px的。我把自己写的css放进这个@media里。页面就消失了。请问这是为什么。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="init.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src='jquery-3.2.1.min.js'></script>
<script type="text/javascript" src='init.js'></script>
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_460544_jpv03k4ksc2nvcxr.css">
</head>
<body>
<div class="left">
<div class="left_top">
<span class="left_top_span1"></span>
</div>
<div class="left_bottom">
<div class="left_bottom_div1">
<a href="www.baidu.com" target="blank" class="left_bottom_a1 iconfont icon-github"></a>
</div>
</div>
</div>
<div class="right"></div>
</body>
</html>
@media screen and (min-width:1024px) and (min-height:768px){
*{
padding:0;
margin:0;
list-style:none;
text-decoration: none;
}
.left{
width: 30%;
height: 100vh;
float: left;
}
.right{
width: 70%;
height: 100vh;
float: left;
background: #ADD8E6
}
.left_top{
height: 30%;
background: -webkit-linear-gradient(bottom,#B0B0B0,#9AC0CD);
position: relative;
z-index: 10
}
.left_top_span1{
width: 80px;
height: 80px;
border: 5px solid #D4D4D4;
position: absolute;
top: 78%;
left: 34%;
border-radius: 50%;
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516962901828&di=1806bdff38373a8f58ce7e9f32885b1a&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fcb8065380cd7912326e00e57a7345982b2b78095.jpg);
}
.left_bottom{
height: 70%;
background: #D4D4D4;
position: relative;
z-index: 9
}
.left_bottom_div1{
position: absolute;
top: 30%;
left: 30%;
}
.left_bottom_a1{
display: block;
width: 32px;
height: 32px;
font-size: 30px!important;
line-height: 32px;
text-align: center;
border-radius: 50%;
color: #2c2c2c
}
}
样式包好style标签, 放在head标签内. 或者写在css文件引入