【发布时间】：2020-09-08 14:16:11
【问题描述】：
我想创建一个响应式页面
- 当页面宽度小于 1000 像素时隐藏右侧聊天信息框
和
- 当页面小于 600px 时隐藏右侧聊天框和左侧边栏；
但我无法弄清楚我的代码有什么问题导致媒体查询不起作用。
此外，即使我向其添加“box-sizing:border”框，左侧栏中的搜索框也会溢出其父级。
最后一个问题是我想让框的垂直侧边框与页面高度相同，而不创建侧滚动条（我尝试将盒装高度设置为 100%，这是可以使用的但它也创建了一个侧滚动条，这在本作业中是不允许的）。
请看下面我的代码，非常感谢：
@media screen and (max-width: 1400px;) {
.groupsettings,
.search {
width: 300px;
}
}
@media screen and (max-width: 1000px;) {
.groupsettings {
display: none;
}
}
@media screen and (max-width: 600px;) {
.search {
display: none;
}
}
.avatar {
border-radius: 50%;
height: 25px;
margin-left: 0;
margin-right: 10px;
width: 25px;
}
.chatroom {
border-right: 1px solid lightgray;
grid-column: 2/3;
grid-row: 2/3;
}
.groupprofile {
border-bottom: 1px solid lightgray;
padding: 10px;
}
.groupsettings {
grid-column: 3/4;
grid-row: 2/3;
min-width: 300px;
}
.grouptitle {
grid-column: 2/4;
grid-row: 1/2;
}
.his {
background-color: lightgray;
}
.his,
.mine {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
font-size: 14px;
width: max-content;
padding: 5px 10px 7px;
}
.loading {
color: lightgray;
font-size: 14px;
text-align: center;
}
.logo {
border-radius: 50%;
height: 40px;
vertical-align: middle;
width: 40px;
}
.messenger {
border-top: 1px solid lightgray;
display: grid;
grid-template-columns: 3fr 4fr 3fr;
grid-template-rows: auto 1fr;
}
.mine {
align-self: right;
background-color: #0097f7;
color: white;
margin-left: auto;
margin-right: 10px;
}
.name {
color: lightgray;
font-size: 12px;
margin: 0;
text-indent: 10%;
}
.normal {
font-size: 14px;
margin-left: 5px;
}
.options {
color: gray;
font-size: 14px;
margin-left: 10px;
margin-top: 10px;
}
.search {
border-right: 1px solid lightgray;
grid-column: 1/2;
grid-row: 1/3;
min-width: 300px;
}
.searchbox {
background-color: lightgray;
border: none;
border-radius: 2px;
box-sizing: border-box;
color: gray;
font-size: 12px;
margin: 10px;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
width: 100%;
}
.searchbox:focus {
border: none;
padding-left: 10px;
text-align: left;
}
.settings {
padding: 0px;
}
.steve {
display: flex;
align-items: center;
margin-left: 10px;
}
body {
font-family: "SFUIText-Regular", "Segoe UI", "Helvetica Neue", Helvetica,
Arial, sans-serif;
margin: 5px 0 0;
}
strong {
border-bottom: 1px solid lightgray;
display: block;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}<html>
<head>
<title>Messenger</title>
</head>
<body>
<div class="messenger">
<div class="search">
<strong>Messenger</strong>
<input class="searchbox" placeholder="Search Messenger" />
</div>
<div class="grouptitle"><strong>normal group chat</strong></div>
<div class="chatroom">
<p class="mine">Hey man, hope everything's okay!</p>
<p class="name">Steve</p>
<div class="steve">
<img
class="avatar"
alt="mine-craft-chara"
src="https://i.imgur.com/R10B80x.png"
/><span class="his"
>All good man, those stacks of diamonds coming in hot!</span
>
</div>
<p class="mine">Nice - make sure to save me some haha :D</p>
</div>
<div class="groupsettings">
<div class="groupprofile">
<img
class="logo"
alt="mine-craft-logo"
src="https://i.imgur.com/vWJzAsu.jpg"
/>
<span class="normal">normal group chat</span>
</div>
<div class="settings">
<p class="options">Options</p>
<p class="loading">Loading...</p>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
标签： html css responsive-design media-queries