深度解析响应式布局

概念

响应式布局，就是响应式设计方案的呈现。具体点就是在不同的设备上，网页能自动识别屏幕宽度、并根据设备的显示面积（一般情况下是指的屏幕宽度，当然，也可以是其他的，可以在下面详细解释）显示出不同的效果。通俗点就是设计一套布局，在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文件可能是多个，也可能是单个。

 

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有