@media screen and (max-width:600px) { section{ color: green; background-color: #fff; } #content img{ width: 150px; height: 150px; margin: 10px auto; border-radius: 50%; } } /* 宽度小于400的样式 */ @media screen and (max-width:400px){ section{ color: #fff; display: flex; flex-direction: column; flex-wrap: wrap; } header{ width: auto; } #content{ background: url(../images/html3.jpg); width: auto; } .item{ float: none; width: auto; } .headline p{ font-size: 14px; } .item img{ border-radius: 10px; } }

这是一个使用媒体查询实现手机自适应的CSS代码示例。

在上述代码中，我们使用@media规则来定义不同屏幕宽度下的样式，例如：

1. 当屏幕宽度小于等于600px时，section元素的字体颜色为绿色，背景色为白色；#content中的图片宽度和高度均为150px，居中显示，圆角为50%。

2. 当屏幕宽度小于400px时，section元素的字体颜色为白色，采用弹性布局（Flexbox）实现元素的自适应布局；header元素的宽度为自适应，#content元素采用背景图像，宽度为自适应；.item元素取消浮动，宽度为自适应；.headline p元素的字体大小为14px；.item img元素的圆角为10px。

通过使用媒体查询，我们可以根据屏幕大小和设备类型，设置不同的样式规则，使页面能够在不同设备上呈现不同的布局和样式，从而实现手机自适应。