当 css 文件中存在媒体查询时，如何设置 div 元素的特定宽度和高度？

Answer 1

第一步在css文件中为元素设置固定的高度和宽度，针对较小的视口调整高度和宽度

#HomeNewsEventsWrapper{
  height: 200px;
  width: 100%;
  background:red;
}
@media (max-width: 580px) {
  #HomeNewsEventsWrapper {
    height: 150px; 
    width: 100%; 
  }
}

<div id="HomeNewsEventsWrapper" class="section fixedheight1 introduction table">

Answer 2

为了解决避免 PageSpeed Insights 中出现较大布局变化的问题， 您可以为 #HomeNewsEventsWrapper div 元素设置显式宽度和高度。然而， 确保这些尺寸适合各种视口大小以保持响应能力非常重要。 以下是实现这一目标的方法：

<div id="HomeNewsEventsWrapper" class="section fixedheight1 introduction table">
< !-- Your content here -->
</div>

#HomeNewsEventsWrapper {
  /* Default width and height */
  width: 100%;
  height: 300px;
  /* Adjust as needed */

}

@media (min-width: 0px) and (max-width: 580px) {
  #HomeNewsEventsWrapper {
    /* Adjust dimensions for smaller viewports */
    height: 200px;
    /* Example height for smaller screens */
  }
}

#HomeNewsEventsWrapper div 最初的默认宽度为 100%，固定高度为 300px。您可以根据设计需要调整高度值。在较小视口（小于或等于 580px）的媒体查询内， 高度调整为200px。您可以修改该值以满足您的布局要求。您可以添加更多针对不同视口尺寸的媒体查询，以进一步细化每个特定屏幕尺寸的尺寸。通过设置明确的宽度和高度值以及适当的媒体查询， 您可以确保布局在不同设备和视口大小之间保持稳定和响应， 从而减少 PageSpeed Insights 建议的大布局变化的可能性。