【发布时间】：2023-04-03 06:40:01
【问题描述】：
我在论坛中搜索了答案，但没有找到可以应用于我的问题的答案。我希望我的 .main-content（文章文本和图像）在移动屏幕上占据整个宽度，而不会显示 .sidebar 和 .ad。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<div class="wrapper">
<header class="main-head">The Header</header>
<nav class="main-nav">
<ul>
<li><a href="index.html">Nav 1</a></li>
<li><a href="nav2.html">Nav 2</a></li>
<li><a href="nav3.html">Nav 3</a></li>
</ul>
</nav>
<article class="content">
<h1 class="h1">Main article area</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus neque mi, suscipit molestie tellus sollicitudin eu. Praesent bibendum lorem at lacus luctus dignissim. Phasellus non volutpat est. Duis sed venenatis arcu, sed accumsan elit. Morbi luctus odio in pellentesque rutrum. Nunc suscipit enim tortor, vel mattis ligula semper a. Mauris at lacinia leo. Aenean luctus elit eget dolor dignissim cursus. Aliquam vulputate ut tellus sed volutpat.
Nam consequat arcu id nunc gravida dictum. Mauris mattis vitae metus nec commodo. Vestibulum malesuada mattis ex, sit amet aliquam augue placerat eget. Fusce finibus ullamcorper tortor, vel tempus diam cursus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sit amet turpis diam. In semper lacinia nunc. Fusce risus sapien, sodales vitae pellentesque in, luctus id libero. Nunc ante velit, volutpat vitae dignissim vel, maximus eu lorem. Donec non fermentum nisl. Praesent vitae accumsan nisi, eu porta diam.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus neque mi, suscipit molestie tellus sollicitudin eu. Praesent bibendum lorem at lacus luctus dignissim. Phasellus non volutpat est. Duis sed venenatis arcu, sed accumsan elit. Morbi luctus odio in pellentesque rutrum. Nunc suscipit enim tortor, vel mattis ligula semper a. Mauris at lacinia leo. Aenean luctus elit eget dolor dignissim cursus. Aliquam vulputate ut tellus sed volutpat.
Nam consequat arcu id nunc gravida dictum. Mauris mattis vitae metus nec commodo. Vestibulum malesuada mattis ex, sit amet aliquam augue placerat eget. Fusce finibus ullamcorper tortor, vel tempus diam cursus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sit amet turpis diam. In semper lacinia nunc. Fusce risus sapien, sodales vitae pellentesque in, luctus id libero. Nunc ante velit, volutpat vitae dignissim vel, maximus eu lorem. Donec non fermentum nisl. Praesent vitae accumsan nisi, eu porta diam.</p>
<img src="image.webp" alt="Dummy" class="responsive">
</article>
<aside class="side">Sidebar</aside>
<div class="ad">Advertising</div>
<footer class="main-footer">The footer</footer>
</div>
</body>
</html>.wrapper {
display: grid;
grid-gap: 0;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: auto auto 1fr auto;
height: 100vh;
grid-template-areas:
"header header header"
"nav nav nav"
"sidebar article ad"
"footer footer footer";
}
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: 'Times New Roman', Times, serif;
font-size: 100%;
}
.main-head {
grid-area: header;
background-color: teal;
background-color: red !important;
}
.content {
grid-area: article;
width: 100%;
background-color: orange;
background-color: white !important;
}
.main-nav {
grid-area: nav;
background-color: lightblue;
background-color: red !important;
top: 0;
width: 100%;
position: sticky;
z-index: 9999;
}
.side {
grid-area: sidebar;
background-color: tomato;
background-color: white !important;
}
.ad {
grid-area: ad;
background-color: lightgreen;
background-color: white !important;
}
.main-footer {
grid-area: footer;
background-color: ghostwhite;
}
li {
list-style-type: none;
margin: 0;
padding: 1rem;
}
a {
text-decoration: none;
color: black;
}
ul {
display: flex;
padding: 0;
margin: 0;
}
.main-head, .content, .side, .ad, .main-footer {
padding: 1rem;
}
.responsive {
max-width: 100%;
height: auto;
}
.h1 {
font-size: 48px;
}
a:hover {
color: white;
}
/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}提前感谢您，如果我的代码有问题，请随时提出建议。
【问题讨论】：
-
你使用的是安卓 WebView 吗？如果是，您可以发布移动屏幕的图像以及如何布置 WebView 小部件
-
我不使用 WebView，但我已经使用 Netlify 部署了我的网站，因此您可以查看一下。 demosite091.netlify.com
-
你需要部署在真机或者手机模拟器上才能看到页面的显示效果。
-
chrome 开发者工具是否符合设备模拟器的条件？如果是，我已经使用过，但无济于事。
标签： javascript html css mobile responsive