[分享]css分辨率变大布局就乱

现在大多数的设备都支持高分辨率，这意味着我们需要考虑如何在不同设备上呈现出一致的网站布局。常见的问题是当页面在高分辨率的设备上渲染时，布局会变得混乱。media only screen and (ma...

现在大多数的设备都支持高分辨率，这意味着我们需要考虑如何在不同设备上呈现出一致的网站布局。常见的问题是当页面在高分辨率的设备上渲染时，布局会变得混乱。

@media only screen and (max-width: 768px){
  .container {
    width: 100%;
  }
}
@media only screen and (min-width: 769px){
  .container {
    width: 768px;
  }
} 

在上述代码中，我们使用了CSS媒体查询来实现针对不同分辨率的布局。在分辨率小于等于768px时，我们将容器元素的宽度设置为100%；而在分辨率大于等于769px时，我们将容器元素的宽度设置为768px。这样，当页面在不同分辨率的设备上呈现时，容器元素的宽度能够自适应屏幕大小。

但如果我们没有重视分辨率问题，就容易在大屏幕上出现布局混乱的情况。例如，在一些情况下，网站会变得非常宽，从而导致内容与页面之间的空隙变得非常宽。如果网站的基础设计不支持大尺寸的分辨率，例如一个固定宽度的布局，那么当网站在高分辨率设备上渲染时，就会出现问题。

因此，为确保网站在不同分辨率设备上的布局稳定，我们应该在设计阶段就考虑分辨率的问题，并使用媒体查询针对不同分辨率的设备进行优化。