深度解析响应式布局

概念

响应式布局，就是响应式设计方案的呈现。具体点就是在不一样的设备上，网页能自动识别屏幕宽度、并根据设备的显示面积（通常状况下是指的屏幕宽度，固然，也能够是其余的，能够在下面详细解释）显示出不一样的效果。通俗点就是设计一套布局，在PC端和移动端均可以使用。 

如何实现响应式布局？

通俗的有三种方法

1、百分比

经过将每一个盒子的宽度设定百分比来实现。

优势：简单方便要

缺点:在额外设置margin、padding时，或者使用不一样浏览器时，会使得布局混乱 

2、meta标签

代码段为：

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

这主要是为了让代码适应移动端的屏幕，其中，viewport 是指须要加载meta 标签时读取的名字为“视口”，其中的 width 须要等于 device-width（设备宽度），主要是告诉浏览器，将布局视口的宽度设置为设备最理想的宽，initial-scale（缩放比例） 为1，这样就保证了加载的时候，要获取设备的宽度，同时要保持原始大小，便于媒体查询 

3、@media 媒体查询

css代码段为：

@media screen and (min-width: 10rem) and (max-width: 20rem) { ... } 

这里面的 第一个 screen 意思为屏幕，这里面还有许多 参数，包括all（用于全部设备）、print（用于打印机和打印预览）、speech（应用于屏幕阅读器等发声设备）。 

使用and来并列显示多种状况，min-width 和max-width 来定义在那种尺寸的屏幕上显示，这就是响应式的灵魂。

上面的例子，就是 媒体查询屏幕，最小宽度为10rem 最大宽度我20rem 的设备宽度上来实现大括号内的样式或者其余功能，这里面的rem也能够换成px或者em之类的单位等。

 

优势：如今大部分的响应式布局都是使用@media 来实现的，能够书写大量的公共样式，在须要适应屏幕的时候，在大括号内加入相应的功能便可实现响应式布局。

缺点：可能须要对同一个类书写不一样的样式，代码比较繁复，难度也稍微难点。

  

在应用中使用哪一种方法实现响应式？

没有哪种方法是完美的，推荐的是三种方法交替使用，在恰当的地方使用恰当的方法。

在布局过程当中，通常都是宽度的百分比与媒体查询交替使用的，而且在加载网页以前，加入meta标签，定义一下viewport的内容，这样更方便于移动端的响应。也兼顾了设备的兼容性。

 

而响应式的设计方案的通常作法就是根据目标用户的访问设备的主要类型作三种或四种布局。每种布局有一个区间，好比说小屏的手机分分辨率能够设定为[320,640]。而后分别设计每种布局便可，通常来讲，各个布局主要是调整模块的排列布局顺序，内容调整越少越好（尽可能减小用户适应成本）。

 

响应式优势

与以往的弹性盒子相比，响应式布局会更好的、更主动的根据用户设备变化更呈现出不一样的效果，它比弹性盒子更灵活，可读性更强。响应式的一套方案解决全部设备的自适应问题。

 

响应式缺点

研发难度高，对应的css文件多是多个，也多是单个。

 

写在不是最后的最后，虽然本题是说的深度解析，但其实也只是说了响应式的浅表问题，优化响应式的代码还有其余的方法，须要人去不断的研究，提升，若是有错，欢迎各位斧正。