主DIV CSS不能正常工作

我正在构建一个响应站点，主DIV CSS在桌面大小时工作，但当我调整到移动大小时，主DIV中的CSS停止工作。可能它与@media屏幕无法正常工作有关？我一直被困在这里两个月，现在找不到问题。主DIV CSS不能正常工作

HTML CSS &：

/* Body styling for browser */ 
 
    /* HTML position/height/width */ 
 
     html { 
 
      position:relative; 
 
      height:100%; 
 
      width:100%; 
 
     } 
 
     
 
    /* Body height/margin/width/position thing */ 
 
     body { 
 
      position:absolute; 
 
      min-width:100%; 
 
      min-height:100%; 
 
      margin: 0px; 
 
     } 
 
     
 
/* Main */ 
 
    /* Main margin */ 
 
     @media screen and (min-width: 481px) { 
 
      div#main { 
 
       margin-bottom: 147px; 
 
       margin-left: 5px; 
 
       margin-right: 5px; 
 
       position: relative; 
 
       margin-top: 4px; 
 
      } 
 
      
 
     /* Main text styling paragraph */ 
 
      div#main p { 
 
       link-decoration: underline; 
 
       color: #000000; 
 
       font-family: "verdana",geneva,sans-serif; 
 
       margin-top: 4px; 
 
       text-align: left; 
 
      } 
 
/* Main Mobile */ 
 
    @media screen and (max-width: 481) { 
 
     /* Main margin mobile */ 
 
      div#main { 
 
       margin-bottom: 147px; 
 
       margin-left: 5px; 
 
       margin-right: 5px; 
 
       margin-top: 2px; 
 
       position: relative; 
 
      } 
 
     /* Main text styling paragraph mobile */ 
 
      div#main p { 
 
       link-decoration: underline; 
 
       color: #000000; 
 
       margin-top: 4px; 
 
       text-align: left; 
 
       font-family: "verdana",geneva,sans-serif; 
 
      } 
 
    } 
 
/* Other */ 
 
    ::selection { 
 
     background: #c1c1c1; 
 
    } 
 
    
 
    ::-moz-selection { 
 
     background: #c1c1c1; 
 
    }

<!DOCTYPE html> 
 
<html lang="en-us"> 
 
<head> 
 
    <meta charset="utf-8"/> 
 
    <link rel="stylesheet" type="text/css" href="/ncore/style/style.css"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
    <link rel="icon" type="image/ico" href="/ncore/style/favicon.ico"> 
 
    <title> 
 
    <?php 
 
     include "./config.php"; 
 
     echo $name; 
 
    ?> 
 
    - Home 
 
    </title> 
 
</head> 
 
<body> 
 
    <?php 
 
    include 'config.php'; 
 
    ?> 
 
    <div id="page"> 
 
     <div id="mbar"> 
 
      <?php 
 
      include './bar/mbar/mbar.php'; 
 
      ?> 
 
     </div> 
 
     <div id="main"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum maximus est, non gravida ligula pretium ut. Maecenas eget fringilla ligula. Nulla imperdiet velit sit amet egestas faucibus. Donec sodales at nibh ac imperdiet. Donec tristique mollis tempus. Morbi ac orci sed metus facilisis blandit ac ut enim. Donec sit amet blandit tortor. Nunc suscipit, lorem in tempor pulvinar, justo turpis rutrum turpis, ut aliquam nisl velit varius lorem. Nam sollicitudin, turpis in vestibulum vehicula, dui orci auctor tellus, a bibendum arcu mi consequat odio. Aliquam eget maximus mauris. Phasellus sit amet eros quis libero malesuada pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eu placerat turpis. Phasellus aliquet laoreet ipsum, sit amet pellentesque lectus vestibulum in. Nam euismod, lorem vitae vulputate vulputate, est lectus auctor arcu, eu varius neque tortor ac lorem. Donec semper id metus nec egestas.</p> 
 
     </div> 
 
     <div id="cbar"> 
 
      <?php 
 
      include './bar/cbar/cbar.php'; 
 
      ?> 
 
     </div> 
 
     <div id="abar"> 
 
      <?php 
 
      include './bar/abar/abar.php'; 
 
      ?> 
 
     </div> 
 
     <div id="ebar"> 
 
      <?php 
 
      include './bar/ebar/ebar.php'; 
 
      ?> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

我以前问过这个问题，但我不太清楚。

来源

2017-08-28 Shmotten

@media screen and (max-width: 481) {

应该

@media screen and (max-width: 481px) {

不要忘记你的单位！

此外，你应该确保你的规则不重叠...最大481px和最小481px将使两个规则正好在481有效。你应该有你的最大低于1px ...或者你的分钟高1px 。

来源

2017-08-28 15:05:57 Salketer

非常感谢！我现在感觉很蠢，哈哈。我还将其中一个@media屏幕设置为480px。 – Shmotten

主DIV CSS不能正常工作

回答

相关问题