如何用CSS实现响应式布局

在今天的移动互联网的时代，越来越多的人通过手机或平板等移动设备访问网站，因此实现响应式布局变得越来越重要。在这篇博客中，我们将学习如何使用CSS实现响应式布局。

什么是响应式布局?

响应式布局是指在不同尺寸和设备上自适应调整页面显示效果的能力。这意味着当我们在电脑、平板电脑和手机上浏览同一页面时，页面的布局和设计应该根据不同的屏幕大小做适配。

1.使用媒体查询

要实现响应式布局，最常用的方式是使用媒体查询。媒体查询是CSS3的一个模块，它允许你根据浏览设备的不同特性，定义不同的CSS规则。

媒体查询的一般语法如下所示：

@media mediatype and (条件){
/* CSS规则 */
}

其中mediatype是指媒介类型，如screen、print、all等，而条件是指需要满足的条件，如屏幕宽度、高度、方向等等。例如：

/* Default styles for all screens */
body {
  font-size: 16px;
}

/* Styles for screens up to 768px wide */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* Styles for screens up to 480px wide */
@media screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

通过这种方式，我们可以根据不同的屏幕大小定义不同的CSS规则以适应不同的设备。

2.使用弹性布局

弹性布局（Flexbox）是CSS3新加入的一种布局模型，它可以使容器能够根据不同屏幕大小自适应调整其内部的子元素位置和大小。

以下是一个简单的示例，使用Flexbox实现三列等宽布局：

.container{
    display: flex;
    justify-content: space-between;
}

.box{
    flex: 1;
}

在这个例子中，子元素它们的宽度会根据父容器的宽度分配。使用align-items和justify-content属性可以调整子元素的位置。

3、使用 Viewport 单位

Viewport 单位（例如 vw、vh、vmin 和 vmax）是相对于视口的相对单位。在响应式设计中，Viewport 单位通常用于定义宽度、高度和间距。例如，可以将容器的宽度设置为视口宽度的一定百分比。

1.vw：相对于视口的宽度， 视口被均分为 100 单位的vw，1vw等于视口宽度的1%。

2.vh：相对于视口的宽度， 视口被均分为 100 单位的vh，1vh等于视口高度的1%。

3.vmin：选取vw和vh中最小的那个。

4.vmax：选取vw和vh中最大的那个

.container {
  width: 90vw;
}

4、流式布局方案

流式布局是一种基于百分比和em的布局，它随着设备的尺寸变化而自动调整。根据布局和浏览器窗口或设备屏幕的大小，元素的宽度和高度都会自动调整大小。

.container {
    width: 100%; /* 占父容器的宽度 */
}
.box {
    width: 50%; /* 占容器宽度的50% */
    float: left; /* 元素浮动到左侧以便于每行显示2个元素 */
}

5、rem 布局

rem单位都是相对于根元素html的font-size来决定大小的，根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。

因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

比如：

html {
 font-size: 10px;
}
.box {
 width: 10rem;
 height: 20rem;
}

当 html 中 font-size: 10px; 时，此时 1rem = 10px，所以 box 盒子的宽高分别为：100px 和 200px;

当我们把 html 中 font-size: 20px; 时，此时 1rem = 20px,此时 box 盒子的宽高就为 200px 和 400px;

可以通过 js 来动态修改不同屏幕尺寸下的 font-size 大小就可以实现等比例放大和缩小了

initPage();
function initPage() {
    var clientWidth =
    document.documentElement.clientWidth || document.body / clientWidth; //获取屏幕可视区宽
    var html = document.getElementsByTagName("html")[0]; //获取html根元素
    html.style.fontSize = clientWidth / 10 + "px"; //动态设置font-size大小
} 
window.onresize = initPage;

注：可以用 flexible.js 插件来实现