css - 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 选项都运行良好。
解决方案
推荐阅读
- php - 查询具体case条件
- python - Python 'float64' 无法转换为 MySQL 类型
- sql-server - 如何更新客户 sql server 数据库中的结构变化
- c# - 如何操作 url 来访问父目录
- python - Pandas:每 n 行重复 n 次值
- java - 我的“输入密码”方法打印出错误的输出
- php - 切换到端口 81 后 XAMPP Apache 未从文件夹读取
- github - 如何撤销 GitHub 对 Heroku 的访问权限?
- chatkit - TypeError:this.state.currentUser.isTypingIn 不是函数
- javascript - 如何在 php 变量中使用 JavaScript 变量?