css 竖屏如何自适应

CSS是一种用于网页设计的样式表语言，它可以控制网页的布局和外观。当我们在移动设备上观看网页时，如何让网页在竖屏模式下自适应是非常重要的。

为了实现竖屏自适应，我们需要使用CSS3中的媒体查询。媒体查询是一种用于媒体类型和其他属性的检查机制，它可以帮助我们在不同的设备上设置不同的CSS样式。

/*当设备宽度小于等于768像素时，使用下面的样式*/
@media screen and (max-width:768px){
    body{
        font-size:14px;
    }
    #wrapper{
        width:100%;
        padding:0;
    }
    #header{
        height:auto;
    }
    #content{
        width:100%;
        padding:0;
    }
}

在上面的代码中，我们设置了一个媒体查询，当设备宽度小于等于768像素时，采用特别的CSS样式。这样可以使得在竖屏模式下，网页更加适应设备的大小。

除了设置特别的CSS样式，我们还需要考虑一些其他的问题。例如，当我们将手机旋转到横屏模式时，网页应该如何自适应？在这种情况下，我们需要添加更多的媒体查询，以确保网页在不同的屏幕方向下都能够自适应。

总之，CSS媒体查询是实现网页自适应的一个重要手段。通过设置不同的样式，我们可以让网页在不同的设备上呈现出最佳的效果。