响应式网页设计，通俗的说，就是适配电脑，平板，手机等不同设备的屏幕，对布局和外观进行合适的调整，以达到同一网页在不同设备，也有更好的用户体验。

为了达到这一体验，联想到的技术便是媒体查询。但响应式设计，并不是单独的媒体查询技术，而是一种Web设计方式，是由一系列技术组成的最佳实践。

下面会从两个方面和大家分享响应式设计。

1 原始的布局方式

2 响应式设计的定义

3 响应式设计实践

原始的布局方式

在响应式设计前，早期网站有两种选择。

一是创建“液态”网页，以百分比拉伸，充满浏览器屏幕。但这种方式在小屏幕上，因为小屏宽度小，百分比计算后每一列都很小，会挤成一团。

二是“固定宽度”网页，以像素计的固定尺寸。在小屏幕上，也会由于固定宽度超过屏幕宽度而出现横向滚动条。

后来还有第三种选择，即通过JavaScript检测屏幕分辨率，加载恰当的CSS样式文件。

第三种选择对用户体验更加友好，但是需要开发和维护不同的多份样式文件。

响应式设计的定义

技术的发展，总是为了解决痛点问题或提升效率。为了解决网页在不同设备布局难题，响应式设计应运而生。

那么，响应式设计的定义是什么，下面取自MDN官网解释。

响应式 Web 设计不是单独的技术，它是描述 Web 设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词。

响应式设计实践

理解了响应式设计的定义，下面和你分享相关实践技术。

3.1 媒体查询

响应式设计正是因为媒体查询才新兴起来。媒体查询在2009年开始被浏览器支持，允许我们测试屏幕大于某个宽度或分辨率，并将CSS根据前面屏幕达成的条件，再运用到网页上。

使用媒体查询的一种通用方式是，为窄屏设备(如手机)创建一个简单的单栏布局，然后检查是否是大于某个尺寸的屏幕，使用多栏布局，这被称为移动优先设计。

举例如下：

html

<div class="col1">abc</div>

<div class="col2">123</div>

css

// 默认移动设备样式，此时col1和col2都是div元素，单独一行，整体为单栏布局。

.col1,

.col2 {

color: #ccc;

}

// 在屏幕宽度大于600px时，col1和col2变为浮动布局，且宽度之和少于100%，为一行两列布局，即多栏布局。

@media screen and (min-width: 600px) {

.col1 {

width: 30%;

display: float;

}

.col2 {

width: 60%;

display: float;

}

}

3.2 现代布局技术

现代布局方式，多栏布局，Flex弹性布局，Grid网格布局，默认都是响应式的。

多栏布局

多栏布局是现代布局技术里面最古老的，因为flex和grid布局的出现，已经使用的比较少了。

多栏布局有两个关键属性，一是column-count直接指定分割为多少列，二是column-width定义每列的宽度，由浏览器计算能分割多少列。

举例如下：

.container {

column-count: 3; // 将container里面的空间分为三列

}

Flex弹性布局

随着IE浏览器的下线，flex在主流浏览器都得到支持，可以放心使用了。弹性布局的关键在于弹性二字，空间多了可以伸长填充，空间少了可以缩小满足。

使用起来也很简单，在父元素使用display: flex; 子元素使用flex: 1，1可以根据你希望分配的占比调整为2或3等其他数值。

结合上方媒体查询的例子，优化float浮动布局为flex布局，举例如下：

html

<div class="container">

<div class="col1">abc</div>

<div class="col2">123</div>

</div>

css

// 默认移动设备样式，此时col1和col2都是div元素，单独一行，整体为单栏布局。

.col1,

.col2 {

color: #ccc;

}

// 在屏幕宽度大于600px时，col1和col2的父元素变为Flex布局，col1占1/3，col2占2/3，即多栏布局。

@media screen and (min-width: 600px) {

.container {

display: flex;

}

.col1 {

flex: 1;

}

.col2 {

flex: 2;

}

}

Grid网格布局

网格布局正如名字所说，允许你按网格的方式排列元素，规划好网格的行和列，然后将元素放置到对应格子中。简单用法是定义父元素display: grid;声明为网格布局，然后还是在父元素定义列grid-template-columns: 1fr 2fr;则表明有两列，第一列占用1份可用空间，第二列占用两份可用空间。

结合上方flex布局的例子，使用grid网格布局进一步精简优化，举例如下：

html部分不变，css部分优化媒体查询里面的css样式，只需要定义父元素的样式，子元素col的样式可以移除

@media screen and (min-width: 600px) {

.container {

display: grid;

grid-template-columns: 1fr 2fr;

}

}

3.3 响应式图像

对图片的响应式设计，可能你会想到在媒体查询中，根据media条件动态替换class样式图片的背景图地址，这是一种思路。现在我们有更多的选择，可以直接对图片进行响应式声明，使用<picture>和<img>元素的srcset和size属性就可以实现。

<img

srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"

sizes="(max-width: 600px) 480px, 800px"

src="elva-fairy-800w.jpg"/>

srcset定义了不同分辨率的图片，sizes定义了不同媒体条件下适配的分辨率，从而使用最近分辨率的图片进行展示。

详细用法可以到MDN官网进行学习。

3.4 响应式排版

使用媒体查询，根据不同条件，调整字体的大小。比如在移动设备字体为2rem，大屏幕下字体可以大些，为4rem。

h1 {

font-size: 2rem; // 移动优先，默认2rem

}

@media (min-width: 1200px) {

h1 {

font-size: 4rem; // 大于1200px屏幕字体为4rem

}

}

还可以使用视口单位实现响应式排版，因为视口单位即为当前屏幕可视范围的百分比单位，这是更有趣的排版方式。

3.5 视口元标签

有时候移动设备加载网页，默认宽度不一定是设备宽度，所以需要使用meta元标签，在html头部明确告知浏览器使用设备宽度

<meta

name="viewport" content="width=device-width,initial-scale=1">

以上就是和大家分享的响应式设计，希望对你设计网页有所帮助。

互相学习，共同成长，喜欢的朋友可以点赞收藏加关注哦！