css中手机屏幕保持100%

在CSS中，保持手机屏幕宽度为100%是非常常见的需求，这样可以使页面在不同的设备上都能够很好地呈现。下面是一些实现这个目标的方法。

body {
    width: 100%;
}

上面的代码指定了文档的宽度为100%，从而可以保证整个文档都会填充整个屏幕。但需要注意的是，有些元素（比如图片）超出文档宽度时，可能会造成滚动条的出现。因此，需要使用下面的代码来避免滚动条的出现。

html,body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

以上代码指定了html和body元素的高度为100%，并且通过overflow:hidden来避免了滚动条的出现。这样，整个页面都会充满屏幕，并且没有滚动条。

另外，有时候我们还需要针对不同的设备设置一些额外的样式。比如，在移动设备上，我们可能希望将字体大小调小、行间距增加，以适应小屏幕的显示。下面是一些实现这个目标的方法。

/* 在移动设备上设置字体大小和行间距 */
@media only screen and (max-width: 480px) {
    body {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* 在平板设备上设置字体大小和行间距 */
@media only screen and (max-width: 800px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }
}

上面的代码通过@media查询，根据不同的设备尺寸设置了不同的样式。这样，我们可以更好地适应不同设备和屏幕大小的显示。