html - 盒子大小和媒体查询不起作用?
问题描述
我想创建一个响应式页面
- 当页面宽度小于 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>
解决方案
you should add this to your head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
推荐阅读
- javascript - 是否可以将数据从节点 js 传递到前端 js 而不是 html?
- amazon-web-services - 对象更改存储类时的AWS S3存储桶通知?
- python - 我想在 OpenAI Gym CarRacing-v0 环境中修改 car_racing.py->create_track() 并构建特定的赛道或各种角落段
- python - Python Authlib:如何解决身份验证代码挑战并验证存储在受保护端点的仅 HTTP 会话 Cookie 中的令牌?
- java - 通过 teamcity 运行 gradle 任务时,出现以下问题
- vaadin - @UIScope 上的网格注释视图奇怪的行为
- python - 使用从夹具返回的列表参数化 Pytest 测试
- c# - 带有 .NET Core 3.1 的 C# 嵌入式资源图像
- ubuntu - 在 GitHub Actions Ubuntu runners 上安装 libzmq3-dev 时遇到问题
- javascript - 如何在单击子组件中的按钮时更改父组件内容?