关于响应式布局

        前言：在这里小编就给大家讲讲响应式布局。首先在写一个响应式页面的时候我们呢应该明白什么是响应式布局，然后知道我们应该分那些步骤去写响应式布局的页面以及在书写响应式布局的时候我们应该注意些什么…

响应式布局概念

概念

使用媒体查询针对不同宽度设备进行布局和样式的设置，从而适配不同的设备。

       简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

优点

用一套代码满足了手机、电脑、平板等各种媒体设备的显示；

缺点

会有较大的兼容问题；代码比较长，容易导致代码累赘从而导致加载时间过长；

点击这里：查看 响应式布局_百度百科

步骤

1. 根据需求搭建好文件框架；
   

2. 确定版面（根据需求文档）：每个尺寸的效果；
   
   根据不同的屏幕书写不同的样式，上图就是常见的屏幕尺寸划分。当然可以根据自己的需求修改，修改时在css代码里面使用媒体查询就可以了；

3. 开始书写样式：
   在这里开始书写样式的时候，建议根据最大尺寸作为初始屏幕；再根据需求文档去修改小屏幕下的显示情况；因为响应式即使会因为屏幕大小而展示形式不一样内容基本上是差不多的；我们也只需要去适当修改即可。

注意事项（都是小编踩过的坑）

1. css文件引入导致设置的样式失效

经常因为某个设置的样式文件不能生效，就是因为引入文件顺序不对！很多时候往上下载的文件都是带有自己的格式的，可能这个格式不是你想要的。所以最好引入的时候就把自己的文件放在最下面，即使前面有冲突也可以覆盖掉。或者你可以选择提高样式的权重！

      按照以下顺序引入css文件一定不会出错（如下图所示）：
                                                                                                 ①下载的各种文件
                                                                                                 ②自己写的公共样式文件
                                                                                                 ③当前页面的专属css文件

2. 你不注意的细节毁了css好多温柔

小编就是一个特别粗心大意的人，前端的样式又像女朋友的心思，总是猜不透。作为一个新手小白，就经常bug，很多时候就是不够细心导致的。在这里给大家举几个最常见的“细节”，以至于导致代码无法生效：
      ①忘记带单位

      最容易忘的不是设置宽高时候的单位，因为那个时候系统都会提示，只需要敲enter就可以带上单位；而媒体查询的时候是需要自己敲的，之前找了半小时就是没带单位~太蠢了吧 这种低级错误希望大家不要犯！

      ②不注意类名和标签的区分

      我们都知道类名的引用在css文件里面是有个 . （点）而如果引入标签是不需要的；css代码也是真的多很多时候不注意就会引入完了加. （点），特别是类似于 section / header / footer 这种可能是类名也许也只是个标签的情况！

      ③使用less机构时不注意 “兄弟关系”

       最常见的情况就是使用伪元素的时候，多个盒子都需要设置不同的样式，其中还包含相同的样式。通常情况下就会先设置一个通用的样式，再选取其他的特殊盒子设置其他的样式；

下图时候他们是“兄弟关系”

下图时候他们是“父子关系”

下图时候他们“啥也不是”

       less结构是非常好用的，但是小编在里面也是偶尔犯迷糊呀！因为一个括号，一个不小心就搞得代码无法生效！觉得自己完全没有设置错，权重也没有问题但是还是出错了！家人们要当心了！