[英]Responsive media screen width not working
我的 css 和 html 如下所示，但是当我缩小屏幕尺寸时，内容列无法正常工作，因为我希望它们一个低于另一个。 为了更清楚，我希望屏幕在更大的显示器上分成两列。 但是在较小的屏幕上，每个内容列都应该占据屏幕的 100% 宽度。
.page-container { position: relative; min-height: 100vh; }.content-wrapper { padding-bottom: 100px; }.left-content { width: 75%; float: left; background-color: red; }.right-content { width: 25%; float: left; background-color: green; }.content-wrapper:after { content: ""; display: table; clear: both; }.footer { position: absolute; bottom: 0; width: 100%; height: 100px; background-color: green; color: white; text-align: center; } @media screen and (max width: 800px) {.left-content, .right-content { width: 100%; } }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>My Title</title> <link rel="stylesheet" type="text/css" href="/css/main.css"> </head> <body> <div class="page-container"> <div class="content-wrapper"> <div class="left-content"> <p>This is left content.</p> </div> <div class="right-content"> <p>This is right content.</p> </div> </div> <div class="footer"> This is footer. </div> </div> </body> </html>
当屏幕尺寸较小时，我想要红色左栏下方的绿色右栏。
媒体查询的媒体功能部分存在语法错误。 它必须是@media screen and (max-width: 800px) ，带有- 。
这是使用 flexbox 而不是依赖float的解决方案
您的媒体查询也有错误。 你错过了max-width中的破折号
.page-container { position: relative; min-height: 100vh; display: flex; flex-flow: column nowrap; }.content-wrapper { padding-bottom: 100px; display: flex; flex-flow: row nowrap; flex: 1; }.left-content { width: 75%; background-color: red; }.right-content { width: 25%; background-color: green; }.content-wrapper::after { content: ""; display: table; clear: both; }.footer { position: absolute; bottom: 0; width: 100%; height: 100px; background-color: green; color: white; text-align: center; } @media screen and (max-width: 800px) {.left-content, .right-content { width: 100%; }.content-wrapper { flex-flow: column nowrap; } }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>My Title</title> <link rel="stylesheet" type="text/css" href="/css/main.css"> </head> <body> <div class="page-container"> <div class="content-wrapper"> <div class="left-content"> <p>This is left content.</p> </div> <div class="right-content"> <p>This is right content.</p> </div> </div> <div class="footer"> This is footer. </div> </div> </body> </html>
媒体查询在更改屏幕分辨率时不起作用，但在更改宽度和高度时有效，谷歌响应开发人员工具检查
[英]Media queries not working when changing screen resolution but working when changing width and height google responsive developer tools checking
具有相同宽度和高度且在较小的媒体屏幕上的自适应div移至新行
[英]Responsive div with same width and height and on small media screen move to new line
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.