首页 > 解决方案 > CSS宽度,我应该使用百分比还是像素的最大宽度

问题描述

假设我有一个容器,我希望它在大屏幕上为 1200 像素宽,而在 <= 1200 像素的屏幕上,我希望它占据整个窗口的宽度。问题是——哪种 CSS 语法更好,为什么?

1)

  .container {
      width: 1200px;
      max-width: 100%;
    }
<div class="container" style="border: 5px solid magenta; background-color: black; color: white; padding: 1em;">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, ea, nemo. Sequi saepe aut eius voluptatum doloribus! Aliquam corporis vitae eveniet, sapiente eos similique voluptatum molestiae, nostrum animi facere, voluptatibus nemo maxime voluptas ipsum atque! Molestias obcaecati totam pariatur vel.
</div>

2)

.container {
      width: 100%;
      max-width: 1200px;
    }
<div class="container" style="border: 5px solid cyan; background-color: black; color: white; padding: 1em;">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, ea, nemo. Sequi saepe aut eius voluptatum doloribus! Aliquam corporis vitae eveniet, sapiente eos similique voluptatum molestiae, nostrum animi facere, voluptatibus nemo maxime voluptas ipsum atque! Molestias obcaecati totam pariatur vel.
</div>

我检查了各种浏览器和设备,两个 CSS 选项都运行良好。

标签: css

解决方案


推荐阅读