@Media 规则有问题。尝试在移动设备中很好地展示答案

【问题标题】：Problem With @Media rules. Trying to Display Well in Mobile@Media 规则有问题。尝试在移动设备中很好地展示
【发布时间】：2021-02-07 11:43:07
【问题描述】：

我正在尝试让一个网站在移动设备和桌面设备上都能很好地显示，但该网站的一部分渲染效果不佳，但在桌面设备上很好，但当我切换到移动设备时：

Mobile

Desktop

我一直在玩不同的媒体查询，但无济于事。调整比例没有任何作用这是代码。提前感谢任何提供帮助的人。

const date = new Date();
var minutesNow= date.getMinutes();
var remainder = minutesNow%15;
var minutesLeft  = 15-remainder;
var secondsNow = date.getSeconds();


let time = (86400 -(3600*24 - 60*minutesLeft + secondsNow)); 
var clock = $('.clock').FlipClock(time, {
    countdown: true
});

#clock1 {
    display: inline-block;
width: auto;
  
}
.container {
    text-align: center;
}
@media only screen and (max-width: 600px) {
  #clock1 {
  transform: scale(0.8)
  }
}

<br>
<link href="https://api.chipware.co.za/css/flipclock.css"rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://api.chipware.co.za/js/flipclock-min.js"></script>
<div class="container">
<div class="clock" id="clock1"></div>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

假设您使用的是桌面优先方法：在父级上使用“flex”框而不是“inline-block”

.container{
  display: flex;
  flex-wrap: wrap
  justify-content: middle;
  aligh-items: center;
  flex-direction: row;
}

如果只使用媒体查询，请将方向更改为垂直：

.container{
    flex-direction: column;
}

如果在移动设备上你想要每行时钟的一部分，只需在较小的屏幕上调整子元素的边距，使每个部分都使用屏幕的宽度。

另外，尝试在每个子元素上使用 width 和 'flex-grow' 属性以获得更好的理解。 https://www.w3schools.com/cssref/css3_pr_flex-grow.asp

【讨论】：