相应式设想，就是让同一个页面在差别的分辨率下都要呈现出最好结果，提拔用户体验。
很轻易想到，设想思绪就是针对差别的分辨率，为页面设置差别的款式，下面我们就来看看怎样完成。不过在此之前，还须要先相识下面两个东西。

viewport

viewport 就是屏幕上用来显现页面内容的那部分地区。 默许情况下，挪动装备上的viewport是大于屏幕宽度的，这是为了确保能够展现那些针对传统PC端开辟的网页。大部分挪动装备的默许viewport都在980px摆布。 如许就会形成浏览器横向的滚动条涌现。有些装备为了防止滚动条涌现，会自动减少网页内容，使内容顺应屏幕宽度，如许就会形成屏幕上的内容异常小，难以看清。 以上两种处理体式格局都不是我们愿望看到的，因而，须要首先将这个viewport设置为装备的宽度，设置缩放比例为1：1，代码以下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

注重：这里关于viewport的解读比较简单，细致的能够参考这篇文章。

媒体查询

媒体查询是写在CSS中的一段代码，作为其他CSS代码的容器。容器中的css代码只要在媒体查询前提的情况下才会见效。比方屏幕宽度<980px，网页正在打印时等。 有2种体式格局能够增加媒体查询：@media划定规矩和<link>标签的media属性。

相应式设想步骤

经由过程上面引见，我们相识到相应式设想的第一步须要在页面中增加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后就是设置各个分辨率下的款式了。但屏幕的分辨率品种实在太多了，我们不可能逐一穷举出来，也没有必要这么做。 实际上能够将分辨率划分红几个局限，然后离别设置这几个局限内的款式。差别局限的分界点叫做相应式规划的 断点。
关于断点的挑选，差别的前端框架都有各自的挑选，但总体上都是根据手机、平板、PC几个局限来的。如bootstrap3的挑选：

• Extra small devices Phones (<768px)
• Small devices Tablets (≥768px)
• Medium devices Desktops (≥992px)
• Large devices Desktops (≥1200px)

断点（breakpoint）的详细写法相似以下情势:

@media screen and (min-width:640px) { /CSS 划定规矩/ }