响应式布局实现原理

响应式布局是一个很基础的前端布局，就是很基础的CSS变换（基于本人有问必答的特点，开车！）。首先，关于布局的方式有哪些，前面随笔提到过，再次赘诉一下吧。

移动端的几种布局的方式，现在常用的大致上分为以下五种，分别是

1.静态布局(Static  Layou)

2.流式布局(LIquid Layout)，代表作有栅栏系统-->网格系统

3.自适应布局

4.响应式布局.

5.弹性布局（rem/em布局）

响应式布局，即“Responsive design”，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

在使用方面，针对不同的项目复杂程度类型，我觉得可以在使用media的基础上加一个flex布局（当然，flex还是针对简单的容易的），大多还是要看Media Queries。关于flex思想不多说。

在使用Media Queries的常用步骤有：

1.在header里面加视图标签，目的是告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2.通过媒体查询设置不同屏幕尺寸下的样式。

@media screen and (max-width: 1080px) {
  #head { … }
  #content { … }
  #footer { … }
}　　

 上面是写在一个页面里，当然也是可以css文件形式直接放在link标签里面，这样看着主要是不混乱更清楚各种尺寸。

<link rel="stylesheet" type="text/css" href="styleID.css"  media="screen and (min-width: 800px) and (max-width: 1500px)">

至于css文件里的样式写法和放在同一页面里的一致。

要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。宽度可以用百分比来实现。

#head { width: 100% }
#content { width: 50%; }　

上面大致是响应式的一些基本处理方式，根据不同标签如img、video、audio等等还是要多注意宽度，兼容方面的不多做阐述

响应式布局对用户来说是非常棒的体验，用啥都可以看，还能有不同的操作体验，但对于开发者来说就不那么友好了，多一套设备意味着多一套样式表，老打工人了....