移动适配：屏幕在需要像素以上就停止放大,并且内容居中显示

最新推荐文章于 2025-12-01 15:56:28 发布

原创最新推荐文章于 2025-12-01 15:56:28 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

该代码段展示了如何使用CSS实现页面在不同屏幕尺寸下的适配。当body宽度超过540px时，将其固定并水平居中。通过媒体查询设置html字体大小，并处理底部工具栏在大屏幕下的固定宽度及居中显示。

/* 1. body 超过540px 则宽度固定为540 ,且水平居中 */
body {
max-width: 540px;
margin: 0 auto;
background-color: #f0f0f0;
}

/* 2. 通过媒体查询，当屏幕宽度超过540px ,
把html 文字大小固定为54px ,一定要加上 !important */
@media (min-width: 540px) {
html {
font-size: 54px !important;
}

/* 3. 因为底部是固定定位，所以单独设置，当屏幕超过540px
固定其宽度，并居中

解释： .toolbar 为你需要居中的块

*/

.toolbar {
width: 540px;
/* 移动父元素的一半 */
left: 50%;
/* 自加的一半 */
transform: translateX(-50%);
}
}