如何解决响应式网站,使div全屏显示,用户向下滚动即可查看其他内容 摘要:
您好,我想让我的网站具有响应性。我将正文分为4个div。每2个div有100%的屏幕,另外两个有margin-top : 50%;
。现在我想每次max-width = 800px
,我希望每个div都具有全屏显示,并且用户向下滚动以查看其他div。如果您想查看我的网站,则为https://frontjim.github.io。感谢提前,对不起我的英语不好。
我已经用过了,但是没用
@media screen and (max-width: 800px) {
body,html {
margin: 0;
padding: 0;
height: 100%;
max-height: 100vh;
display: flex;
flex-direction: row;
flex: 1 1 auto;
min-height: 0;
}
}
.back {
display: flex;
flex-direction: column;
}
.navbar {
width: 100vw;
height: 100vh;
}
.mater {
width: 100vw;
height: 100vh;
}
.cb {
width: 100vw;
height: 100vh;
}
.scroll {
width: 100vw;
height: 100vh;
}
解决方法
使用CSS Grid,可以轻松完成工作
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Responsive Grid</title>
</head>
<body>
<div class="main">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh 100vh;
}
.div1 {
background-color: lightgreen;
}
.div2 {
background-color: lightseagreen;
}
.div3 {
background-color: coral;
}
.div4 {
background-color: lightblue;
}
@media screen and (max-width: 800px) {
.main {
grid-template-columns: 1fr;
grid-template-rows: 100vh 100vh 100vh 100vh;
}
}
实时取景:https://codepen.io/zgheibali/pen/ZEWWVvr
我希望我的回答会有所帮助:)
,更改设计。用法如下:
在html ::
<div class='flexyy'>
<div class='div1'>....</div>
<div class='div2'>....</div>
<div class='div3'>....</div>
<div class='div4'>....</div>
</div>
在CSS中::
div1{
width:100%;
}
div2{
width:100%;
}
div3{
width:100%;
}
div4{
width:100%;
}
@media(min-width:800px){
.div1,.div2,.div3,.div4{
width:auto;
}
.flexyy{
display:flex;
flex-direction:row;
flex: 0.5 1 auto;
flex-wrap:wrap;
}
}
,
您可以具有包含子元素的常规容器。此容器具有width: 100vw
,height: 100vh
和display: flex
。您无需添加flex-direction: row
,因为它是默认设置。
孩子将有width: 100%
。
摘要:
* {
margin: 0;
padding: 0;
}
.flex {
width: 100vw;
height: 100vh;
display: flex;
}
.div1 {
background-color: red;
width: 100%;
}
.div2 {
background-color: blue;
width: 100%;
}
.div3 {
background-color: green;
width: 100%;
}
.div4 {
background-color: grey;
width: 100%;
}
<div class="flex">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="flex">
<div class="div3"></div>
<div class="div4"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。