我正在尝试获得桌面上的响应式布局:
在移动设备上看起来基本上像是旋转了 90 度:
我已经让桌面版正常运行,移动版也差不多可以正常运行,但我对移动版的处理方式感觉不对。感觉就像是“重做”,关闭 flex 并改用 float 。当我真的只想将我的“行”变成“列”时,但我尝试并失败了使用我从这里获取的宽度和流向的组合: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
我还有一个次要问题,当我调整屏幕大小时,此 HTML 是“响应式”的,但当我使用 chrome 来模拟 移动设备时它不起作用!
简而言之,我感到困惑,觉得自己做错了!什么是正确的方法?
这是我当前的代码:
body {
display: flex;
}
.game-area {
padding-top: 24px;
padding-left: 54px;
width: 1156px;
/*display: flex;
flex-direction: row;*/
margin: auto;
background-color: #27332F;
}
.tile {
float: left;
height: 100px;
width: 100px;
margin-left: 20px;
text-align: center;
vertical-align: middle;
background-color: orange;
color: white;
}
.row {
display: flex;
width: 100%;
clear: left;
padding: 5px;
justify-content: space-evenly;
}
#highest {
float: left;
}
#lowest {
float: right;
}
@media screen and (max-width: 1200px) {
.game-area {
width: 1156px;
}
.tile {
margin-left: 20px;
}
}
@media screen and (max-width: 960px) {
.game-area {
width: 916px;
}
}
@media screen and (max-width: 768px) {
.game-area {
width: 724px;
}
}
@media screen and (max-width: 600px) {
.game-area {
width: 556px;
}
}
@media screen and (max-width: 420px) {
.game-area {
padding-left: 15px;
padding-top: 27px;
}
.row {
width: 33%;
display: block;
clear: none;
float: left;
flex-direction: column;
justify-content: space-evenly;
}
.tile {
float: none;
height: 50px;
font-size: 8pt;
}
}
@media screen and (max-width: 320px) {
.game-area {
width: 290px;
}
}
<meta name="viewport" content="width=device-width">
<div class="game-area" id="game-area-div">
<div id="number-row" class="row">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
<div class="tile">4</div>
<div class="tile">5</div>
<div class="tile">6</div>
<div class="tile">7</div>
</div>
<div id="answer-row-1" class="row">
<div class="tile">2</div>
<div class="tile">4</div>
<div class="tile">6</div>
</div>
<div id="answer-row-2" class="row">
<div class="tile">1</div>
<div class="tile">3</div>
<div class="tile">5</div>
<div class="tile">7</div>
</div>
</div>
更新 感谢this answer媒体标签现在可以正常工作 :) 使用:
<meta name="viewport" content="width=device-width">
最佳答案
这可以使用 flexbox 来完成,只需将 flex-direction
设置为 column。
.wrap {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 25px;
}
.wrap--mobile {
flex-direction: column;
float: left;
width: 50px;
height: 400px;
margin-right: 25px;
}
.block {
width: 50px;
height: 50px;
background-color: red;
}
<!-- Horizontal layout !-->
<div class="wrap">
<div class="block">1</div>
<div class="block">2</div>
</div>
<div class="wrap">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
<div class="wrap">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
<hr>
<!-- Vertical layout !-->
<div class="wrap wrap--mobile">
<div class="block">1</div>
<div class="block">2</div>
</div>
<div class="wrap wrap--mobile">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
<div class="wrap wrap--mobile">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
希望这对您有所帮助。
关于html - CSS 在移动设备上将 Flex 布局旋转 90 度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46214190/