个人中心
gpt4 book ai didi

How can I make a bunch of horizontal divs responsive to the screen?(我怎么才能做出一堆水平的div来响应屏幕呢？)

转载 作者：bug小助手 更新时间：2023-10-24 19:35:47 24 4
gpt4 key购买 nike



I am displaying a number of boxes on the screen. These refer to containers of 2 sizes.

我正在屏幕上显示一些框。这些是指两种大小的容器。


On a mobile screen, I want the boxes to reduce in size when the screen horizontal width is too small - keeping the same aspect ratio. How do I accomplish this? I don't know much about flexboxes to do this.

在移动屏幕上，当屏幕水平宽度太小时，我希望框的大小减小-保持相同的纵横比。我如何才能做到这一点？我不太了解如何使用Flexbox来做到这一点。




html {
  font-family: verdana
}
.Container {
  white-space:nowrap;
  display:inline-block;
}
.Bx {
  cursor: pointer;
  display: inline-block;
  height: 2.0em;
  width: 5em;
  border: 1px solid gray;
  margin: 0px;
  box-sizing: border-box;
  background-color: #f7e0f7;
}

.B4 {
  width: 10em;
  background-color: #e0f7ff;
}

<!DOCTYPE html>
<html>

<head>
  <title>Box Test</title>
</head>

<body>
  <b>Box Test</b><br><br> Boxes should shrink <u>maintaining their aspect ratio</u>.<br><br> These boxes should shrink when the longest row cannot fit in the screen horizontally<br>
  <div class="Container">
    R1 <div class="Bx"></div><div class="Bx"></div><div class="Bx"></div><div class="Bx"></div><div class="Bx"></div><br>
    R2 <div class="Bx"></div><div class="Bx"></div><div class="Bx"></div><div class="Bx"></div><div class="Bx"></div><br>
    R3 <div class="Bx B4"></div><div class="Bx"></div><div class="Bx"></div><div class="Bx B4"></div><div class="Bx"></div><br>
    R4 <div class="Bx"></div><div class="Bx"></div></div><br>
    R5 <div class="Bx"></div><div class="Bx B4"></div><div class="Bx"></div><div class="Bx"></div><br>
    R6 <div class="Bx B4"></div><div class="Bx"></div><div class="Bx"></div><br>
  </div>
</body>

</html>




更多回答

Sounds like it is time to learn about responsive design.

听起来是时候学习响应式设计了。

优秀答案推荐

Use CSS @media queries with aspect-ratio

使用长宽比的css@media查询


For example (taken from the mdn webpage below):

例如(摘自下面的MDN网页)：


@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }

For further info, please refer to the mdn webpage
aspect-ratio info

更多信息，请参考MDN网页长宽比信息


更多回答

24 4 0
文章推荐： Generating unit tests for pairs of files on disk(为磁盘上的文件对生成单元测试)
文章推荐： gRPC is not support with spring-boot 3 . is it going to be deprecated?(弹簧靴3不支持GRPC。它会被弃用吗？)
文章推荐： Dynamic sitemap for NextJs 13(面向NextJs的动态站点地图13)
文章推荐： How to achieve a static image with overlay which displays a text when user hovers over the blue overlay in UWP apps?(如何实现静态图像叠加，当用户在UWP应用程序中将鼠标悬停在蓝色叠加上方时显示文本？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com