响应式设计就是让同一个页面在不同分辨率下呈现出最佳效果，提升用户体验。很容易想到设计思路是为不同分辨率的页面设置不同的样式。让我们来看看如何实现它。但在此之前，你需要知道以下两件事。viewportviewport是屏幕中用于显示页面内容的部分。默认情况下，移动设备上的视口大于屏幕宽度，以确保可以显示为传统PC开发的网页。大多数移动设备的默认视口约为980px。这将导致浏览器的水平滚动条出现。为了避免滚动条的出现，有些设备会自动缩小网页内容，使内容适合屏幕宽度，这会导致屏幕上的内容很小，很难看清。以上两种处理方式都不是我们想看到的。因此，我们需要先将视口设置为设备的宽度，并将缩放比例设置为1:1。代码如下：注意：这里对viewport的解释比较简单，具体可以参考这篇文章。媒体查询媒体查询是用CSS编写的一段代码，充当其他CSS代码的容器。容器中的css代码只有在媒体查询的条件下才会生效。例如当屏幕宽度<980px时，当网页正在打印时等。添加媒体查询的方式有2种：@media规则和标签的media属性。响应式设计步骤通过上面的介绍，我们了解到响应式设计的第一步需要在页面中添加如下代码：然后是设置每个分辨率的样式。但是屏幕分辨率种类繁多，我们不可能一一列举，也没有必要。其实可以把分辨率分成几个范围，然后分别设置这些范围内的样式。不同范围之间的分界点称为响应式布局断点。关于断点的选择，不同的前端框架都有自己的选择，但一般都是以手机、平板、PC的范围为准。例如bootstrap3的选择：ExtrasmalldevicesPhones(<768px)SmalldevicesTablets(≥768px)MediumdevicesDesktops(≥992px)LargedevicesDesktops(≥1200px)断点（breakpoint）的具体写法类似以下形式：@mediascreenand(min-width:640px){/CSSrules/}
