我正在构建一个响应式网站，主 DIV CSS 在桌面大小时可以正常工作，但是当我调整到移动大小时，主 DIV 中的 CSS 停止工作。也许它与@media 屏幕无法正常工作有关？ 我已经被困在这个问题上两个月了，找不到问题。
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>我以前问过这个问题，但我不够清楚。
最佳答案
@media screen and (max-width: 481) {
应该是
@media screen and (max-width: 481px) {
不要忘记你的单位!
另外，您应该确保您的规则不重叠...最大 481px 和最小 481px 将使两条规则在恰好 481 时有效。您应该将最大值降低 1px...或者将最小值提高 1px。
关于html - 主 DIV CSS 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45922045/