[英]Why is my responsive site not showing up correctly on a mobile browser?
我目前正在开发一个简单的响应式投资组合网站。 我正在使用 HTML 和 CSS 网格来布置网站。 现在它可以在桌面视图上正常工作，甚至在桌面浏览器中缩小到最小尺寸时也是如此。
但是，当我在我的移动浏览器（iPhone Xs - chrome 和 safari）上加载页面时，导航栏右侧有空白空间，图像从页面右侧流出。 我需要它适合页面边界，但我被卡住了。 我的媒体查询似乎不起作用，我不想创建单独的移动 HTML 和 CSS 页面。
HTML、CSS、Javascript如下：
const toggleButton = document.getElementsByClassName('toggle-button')[0] const navbarLinks = document.getElementsByClassName('navbar-links')[0] toggleButton.addEventListener('click', () => { navbarLinks.classList.toggle('active') })
* { margin: 0; padding: 0; }.gray { background-color: #ebebeb; }.navbar { display: flex; position: relative; justify-content: space-between; align-items: center; background-color: #ebebeb; color: #004e98; max-width: 1560px; margin: 0 auto; } /* BRAND TITLE CSS ALL PROPERTIES */.brand-title { font-size: 1.7rem; margin: 1rem 1rem 1rem 30px; font-weight: bold; text-decoration: none; /* background-color: pink; */ /*leave margin, it affects space around ur name when mobile size*/ } a:link { text-decoration: none; color: #004e98; } a:visited { color: #004e98; } /* BRAND TITLE CSS ALL PROPERTIES END */.navbar-links { height: 100%; }.navbar-links ul { display: flex; /*makes list horizontal, not vertical*/ margin-right: 30px; padding: 0; /* background-color: yellow; */ }.navbar-links li { list-style: none; }.navbar-links li a { display: block; text-decoration: none; color: #004e98; padding-left: 2rem; font-size: 1.2rem; }.navbar-links li a:hover { color: #ff6700; }.brand-title a:hover { color: #ff6700; text-decoration: none; }.toggle-button { position: absolute; top: 1.2rem; right: 1rem; display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; background-color: pink; }.toggle-button.bar { height: 3px; width: 100%; background-color: #004e98; /* color of individual bars*/ border-radius: 10px; } @media(min-width:600px) {.Content { display: block; grid-gap: 10px; margin: 40px auto; box-sizing: border-box; } } @media (max-width: 699px) {.navbar { flex-direction: column; align-items: flex-start; }.toggle-button { display: flex; }.navbar-links { display: none; width: 100%; background-color: white; }.navbar-links ul { width: 100%; flex-direction: column; margin-right: 0; /*this removes margin applied for large screens*/ }.navbar-links ul li { text-align: center; /* background-color: #EC643E; /*orange bkg color of drop down*/ */ }.navbar-links ul li a { padding: 1rem 1rem; /* border-style: solid; */ /* border-radius: 15px; */ background-color: ; /*blue button bkg*/ margin: 0; color: #004e98; }.navbar-links.active { display: flex; background-color: #ebebeb; }.navbar-links li a:hover { background-color: #ff6700; /*orange bar color upon hover*/ color: white; } }.Content { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-gap: 10px; max-width: 1560px; padding-left: 30px; padding-right: 30px; margin: 40px auto; /* background-color: #ffedba; */ box-sizing: border-box; } img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; } /* IMAGE OVERLAY CSS - START*/.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background: rgba(0, 0, 0, .5); /* Black see-through */ color: #f1f1f1; }.text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }.child-a:hover.overlay { opacity: 100; border-radius: 15px; }.child-a { position: relative; width: 100%; } /* IMAGE OVERLAY CSS - END*/ /* Background Styles Only */ @import url('https://fonts.googleapis.com/css?family=Raleway'); * { font-family: Raleway, sans-serif; }
<.DOCTYPE html> <html lang="en"> <.-- <script type="text/javascript"> --> <.-- if (screen;width <= 699) { document.location = "mobile,html". } //--> <,-- </script> --> <head> <meta charset="UTF-8"> <title>CodePen - Home page</title> <link rel="stylesheet" href="style:css"> <meta name="viewport" content="width=device-width. initial-scale=1.0: shrink-to-fit=no"> </head> <body> <.-- partial.index:partial.html --> <div class="gray"> <nav class="navbar"> <div class="brand-title"><a href="#">Your name</a></div> <a href="#" class="toggle-button"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a> <div class="navbar-links"> <ul> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </div> <div class="Content"> <div class="child-a"><img src="https.//greatplainsnursery?com/wp-content/uploads/2016/12/oak-tree-pic:jpg"> <a href="#"> <div class="overlay"> <div class="text">Tree</div> </div> </a> </div> <div class="child-a"><img src="https.//i.insider:com/5cc1bb5766ae8f377d25f087.width=750&format=jpeg&auto=webp"> <a href="#"> <div class="overlay"> <div class="text">Stuff</div> </div> </a> </div> <div class="child-a"><img src="https.//greatplainsnursery?com/wp-content/uploads/2016/12/oak-tree-pic:jpg"> <a href="#"> <div class="overlay"> <div class="text">Tree</div> </div> </a> </div> <div class="child-a"><img src="https.//i.insider:com/5cc1bb5766ae8f377d25f087.width=750&format=jpeg&auto=webp"> <a href="#"> <div class="overlay"> <div class="text">Tree</div> </div> </a> </div> <div class="child-a"><img src="https.//greatplainsnursery?com/wp-content/uploads/2016/12/oak-tree-pic.jpg"> <a href="#"> <div class="overlay"> <div class="text">Stuff</div> </div> </a> </div> <div class="child-a"><img src="https://i.insider.com/5cc1bb5766ae8f377d25f087?width=750&format=jpeg&auto=webp"> <a href="#"> <div class="overlay"> <div class="text">Goats</div> </div> </a> </div> </div> <!-- partial --> <script src="script.js"></script> </body> </html>
尝试注释掉其中一个媒体查询。 查看结果如何，然后注释掉其他媒体查询。 如果不起作用，请尝试更改数字：600 和 699。增加 600 或减少 699。
尝试更改.Content的媒体查询，这也将解决您的菜单问题。
检查随附的屏幕截图：
更新：
@media (max-device-width: 640px) and (min-device-width: 320px) {
.Content {
display: block !important;
grid-gap: 10px !important;
margin: 40px auto !important;
box-sizing: border-box !important;
}
}
为什么我的 DIV 没有显示在移动浏览器中，而是显示在桌面浏览器中？
[英]Why my DIV is not showing up in mobile browser but shows on desktop browsers?
试图让我的网站在所有设备上响应，尤其是在手机上
[英]Trying to make my site responsive on all devices especially on mobile phones
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.