鍍金池/ 問答/HTML/ @media無效 出錯

@media無效 出錯

@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" >
</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標簽內(nèi). 或者寫在css文件引入

2018年6月15日 04:09