0
私はレスポンシブサイトを構築しています。メインDIV CSSはデスクトップサイズで動作しますが、モバイルサイズにリサイズするとメインDIVのCSSは機能しなくなります。多分@mediaの画面が正常に機能しないのと関係がありますか？ 私はこれで2ヶ月間立ち往生しており、問題を見つけることができません。メイン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>私は前にこの質問をしてきましたが、私は十分に明確ではありませんでした。
ありがとうございました！私は今、とても馬鹿だと思う。 @mediaの画面を480pxに設定しました。 – Shmotten