css 自适应布局的方式

在许多网站或应用中，我们都希望网页内容能够适应不同大小的屏幕，不同分辨率的设备，这就是所谓的响应式布局。而CSS自适应布局，就是指通过设置CSS属性，让页面的布局能够自动调整，从而适应不同的屏幕。

CSS自适应布局有多种实现方式，接下来我们将介绍其中几种常用的方式。

/* 方式一：利用百分比尺寸 */
div{
    width: 50%;
}

/* 方式二：使用rem单位 */
html{
    font-size: 14px;
}

div{
    width: 5rem;
}

/* 方式三：通过媒体查询调整布局 */
@media screen and (max-width: 768px){
    div{
        width: 100%;
    }
}

这三种方式，分别使用了百分比尺寸、rem单位以及媒体查询三种方式实现自适应布局。其中，百分比尺寸是最简单的一种方式，将元素的宽度设置为百分比值，可以让元素的宽度自适应父级元素的大小。此外，rem也是一个相对单位，它是相对于html根元素的字体大小而言，通过设置根元素的字体大小，可以实现元素的自适应布局。

最后一种方式：媒体查询是一种完全的CSS3功能，它可以根据设备的屏幕尺寸来应用CSS规则，从而达到不同设备的自适应布局。通过使用@media规则，我们可以针对不同尺寸的设备设定不同的元素尺寸、字体大小及样式等，从而实现自适应布局。