时间戳

首页 > 解决方案 > CSS 中的媒体屏幕代码无法按预期工作

css - CSS 中的媒体屏幕代码无法按预期工作

问题描述

我的网站不适用于宽度显示为 393 的移动设备。请帮助。我的 CSS 代码如下。

/*----------------------------~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* FOR MEDIA QUERY (RESPONSIVE)  settings for mobile/tabs etc */
/*----------------------------~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /*---------------------------------- */
    /* for different width */
@media screen 
    and (max-width:1572px)
    and (max-width:500px)
    and (max-width:600px)
    and (max-width:460px)
    and (max-width:393px) {

    #divHeader {
        float: none;

    }   
    #mainH1{
        font-size: 20px;
        text-align: center;
        color: red;
    }

    #divMiddle{
        float: none;
        height:500px;
        width: 90%; 

        }   
    #divGlobe{
        float: none;
        height: 500px;
        width: 90%
        }   

    }

我为响应式网页定义了 CSS 文件和代码设置的主页的快照。

<html>
<head>
    <meta charset="UTF-8">
    <meta name= "index.html" content="html self made web site "> 
    <meta name= "keywords" content="web design, affordable and professional">
    <meta name="description" content="Affordable and smart web desing without any builders rather via self made codes">
    <meta name="Author" content="Binod Binani">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--Css link -->
    <link rel="stylesheet" type="text/css" href="../html-web/sc-css/sc_style1.css">
    <script type="text/javascript" src="../html-web/java-js/slides.js" ></script>
    <title>#Sharp Compusoft#</title>
</head>

标签： cssresponsive-design

解决方案

使用最大宽度，按照从高分辨率到低分辨率的顺序。保持@media 分开。

#something {
  /* all resolutions */
}
@media screen and (max-width: 1572px) {
  #something {
    /* here all css for 1572px and smaller */
  }
}
@media screen and (max-width: 600px) {
  #something {
    /* here all css for 600px and smaller */
  }
}
@media screen and (max-width: 500px) {
  #something {
    /* here all css for 500px and smaller */
  }
}
@media screen and (max-width: 460px) {
  #something {
    /* here all css for 460px and smaller */
  }
}
@media screen and (max-width: 393px) {
  #something {
    /* here all css for 393px and smaller */
  }
}

如果您希望@media 以“从-到”分辨率为目标，请使用

@media screen and (min-width: 461px) and (max-width: 500px) {
  #something {
    /* here css for displays between 461px - 500px */
  }
}

推荐阅读