聊聊响应式布局

聊聊响应式布局（Responsive Design）

起因#

最近接触响应式布局是在思漩的作业上，她询问的如何完成响应式的布局。这次也是我第一次真正动手实践和去了解响应式布局。

这里说明一下，之前总是说自己会前端，其实会的也都只是简单的HTML和CSS，之前做的小项目是没有接触过响应式的，只是一个HTML和CSS的熟练工，连H5和CSS3，还有JS，因为知道的越来越多，也不敢说自己已经掌握了。只能按照自己目前的技能等级定位为了解。

• 目的：打算对响应式布局来一个系统的认识，能够理解响应式设计的基础概念以及历史。
• 前提：学习过HTML基础，对CSS工作方式有过简单的理解

查阅的资料#

MDN：响应式设计-https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design

MDN：CSS布局-https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout

这些资料很棒，我没有将内容知识迁移。自行查阅。

何为响应式布局？#

官方解释如下：

随着越来越多的屏幕尺寸出现在支持Web的设备上，响应式Web设计（RWD）的概念出现了：一组允许网页改变其布局和外观以适应不同的屏幕宽度、分辨率等的实践。

1. 在我看来:

   响应式布局的核心就是“响应”。那么何为响应呢？简单的理解就是“在合适的场景，看到合适的页面。如在PC端看到的页面，如果平移到手机端，能够自动调节为手机要看到的样式”。这其实也就是响应式。

   或者是通过JS来监控屏幕的分辨率，从

2. 了解到响应式只是CSS基本布局中的一种。能与之同级的概念有：

   • 正常布局流
   • 弹性盒
   • 网格
   • 浮动
   • 定位
   • 多列布局
   • 响应式布局
   • 流媒体查询
   • 传统布局

3. 之前我做网页开发的时候，第一步我也会先考虑是使用哪种架构，是创建一个“固定宽度”的站点，还说做一个响应式布局（只想过没做过）。

响应式实现原理#

根据屏幕的分辨率，调用不同的样式。

1. 通过CSS计算屏幕大小来控制的：

   Copy
   @media screen and (min-width: 992px)
   .layui-col-md3 {
       width: 25%;
   }
   

2. 视口元标签

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

我们的实现#

我们使用的是LayUI框架里面的栅格化布局，通过框架内部提供的样式，来完成各个像素下对应的屏占比和显示的内容。

引用：https://www.layui.com/doc/element/layout.html

细节：就是说在同一个Div上引用不同模式的屏占比，在浏览器监控到屏幕大小的时候，就会自动响应对应的比例。

Copy
<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9">
      你的内容 9/12
    </div>
    <div class="layui-col-md3">
      你的内容 3/12
    </div>
  </div>
   
  移动设备、平板、桌面端的不同表现：
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
  </div>
</div>

总结#

这里只是对响应式进行了初步的了解，如果想成为熟练工，那肯定是需要动手去做Demo，去实操的。不然很容易造成眼高手低的现象。

通过本次了解之后，如果以后顺路看到响应的响应式文章，我就可以点进去看看是不是和我的想法一样，对自己的这个知识点进行查漏补缺。虽然我不是从事前端研发工作，但是，学习了解这些，好像对后端也是相辅相成的。对于我的程序员道路，有益无害。