前端响应式布局原理与实践

西西木科技-专业的shopify liquid开发机构-前端JS丨a href=’https://dev.weswoo.com/’>react后端丨API接口丨shopify plus丨外贸独立站

前言

作为前端开发，响应式网站开发是必备技能之一。 响应性有其优点和缺点。 这就需要我们在开发过程中做出选择。 对于内容较少、以展示为主的网站，采用响应式风格； 对于内容较多、管理类型较多的网站，则分别开发，不同的设备使用不同的代码集。 本文将主要讨论响应式布局的原理和技巧，并结合实例加深印象。

响应性和适应性

我们很多人其实都把响应式网站和自适应网站当成是同一件事，但实际上这两个网站的布局方式是有一定区别的。 我们可以分别看一下这两种方法的概念以及它们解决的问题。

什么是响应式布局？

响应式布局是指一个网站可以兼容多种终端，能够根据屏幕的大小自动调整页面的显示方式和布局。 我们不需要为每个终端制作特定的版本。 响应式网站的一些标志：

同时适配PC+平板+手机等； 当靠近手持终端设备时，选项卡导航变为经典的抽屉式导航； 网站的布局会根据视口调整模块的大小和位置；

什么是自适应布局？

自适应布局是指网页可以适应不同尺寸的终端设备上的显示，即网站可以在不同尺寸的设备上显示同一页面，让同一页面适应不同尺寸的屏幕，并自动调整布局根据屏幕的大小。 飞涨。 自适应布局的几个标志：

大多只适配单一终端的N个主流视口； 当视口尺寸低于设置的最小视口时，界面将显示不完整，并出现水平滑动条； 整体框架不变，横线布局过大。 还会减少更多。

如何选择

一般来说前端响应式布局原理与实践，这两种方法是相似的。 它们都是先检测设备，根据不同的设备使用不同的CSS。 那么我们在开发过程中应该如何选择呢？ 这取决于响应性和适应性的优缺点。

响应式布局的优点：

1、灵活性强； 2.可以快速解决多设备显示应用问题。

缺点：

1、效率低，各种设备兼容工作量大； 2、代码繁琐，加载时间会加长； 3、一定程度上改变了网站原有的布局结构。

自适应布局的优点：

1、更能适应网站的复杂性； 2.代码更加高效； 3、测试和操作比较简单、准确。

缺点：

1、同一个网站需要针对不同的设备开发不同的页面，增加了开发成本。

以上两种方式各有优缺点，所以我们在开发时候一定要从实际项目出发。 当页面不太复杂时，我们可以使用响应式布局； 当页面信息较多、布局比较复杂时，我们可以使用自适应布局。

响应式布局设计步骤

介绍完基本概念后响应式，我们来看看响应式布局的基本步骤，主要分为以下几个步骤：

1.设置元标签

2.使用@Media查询设置样式，这是响应式布局的核心

@media screen and (max-width: 1920px) { ... }

3.设置布局分界点，即通过设置多种视图宽度样式来控制页面布局

@media screen and (max-width: 1920px) { ... }
@media screen and (max-width: 1700px) { ... }

其实很简单，只是适配的时候有点繁琐。

布局断点

至于@Media查询的分割点，这个可以根据自己的项目进行调整，设置适合自己项目的布局分割点。 设置分界点时，要注意顺序。 使用max-width时，较大的值放在前面，较小的值放在后面； 使用min-width时，较小的值放在前面，较大的值放在后面。 下面列出的是我在项目开发过程中设置的一些布局断点：

@media screen and (max-width: 1920px) { ... }
@media screen and (max-width: 1700px) { ... }
@media screen and (max-width: 1600px) { ... }
@media screen and (max-width: 1440px) { ... }
@media screen and (max-width: 1280px) { ... }
@media screen and (min-width: 992px) and (max-width: 1200px) { ... }
@media screen and (min-width: 768px) and (max-width: 991px) { ... }
@media screen and (max-width: 767px) { ... }

那么我们什么时候使用min-width，什么时候使用max-width呢？ 一般来说，如果移动端优先，则使用min-width； 如果PC端优先，则使用max-width。

布局单元

熟悉常用的布局单元仍然很重要。 常用的布局单位包括像素（px）、百分比（%）、em、rem、vw/vh。 我们可以合理利用这些布局方案来提高我们开发的效率和质量。

像素

像素是网页布局的基础。 一个像素代表计算机屏幕上可以显示的最小区域。 像素分为两种：CSS像素和物理像素。 两者的区别如下：

CSS Pixel：作为 CSS 中使用的抽象单元提供给 Web开发；

物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的百分比

当浏览器的宽度或高度发生变化时，可以利用百分比单位，使浏览器中的组件的宽度和高度随着浏览器的变化而变化，从而达到响应式的效果。 一般来说，我们直观的理解是，子元素所占的百分比完全是相对于直接父元素而言的。 这样理解是没有问题的，比如高度和宽度属性。 但在CSS盒模型中，不仅有height和width属性，还有padding、border、margin等属性，所以这是值得我们详细分析的。

我们先写html代码，然后使用不同的css代码看看会发生什么：

    
子元素

1、子元素的高度和宽度

当子元素的高度和宽度使用百分比时，它们相对于直接父元素的高度和宽度发生变化。

.parent{
    width: 200px;
    height: 200px;
    background: #aaaaaa;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
}

2、子元素的上、下、左、右

如果子元素的顶部和底部设置为百分比，则会相对于父元素的高度直接非静态定位（默认定位）；

如果子元素的左右设置为百分比，则它们将相对于直接非静态定位（默认定位）父元素的宽度。

.parent{
    width: 200px;
    height: 200px;
    background: #aaaaaa;
    position: relative;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
    position: absolute;
    top: 50%;
    left: 50%;
}

3、子元素的padding

如果子元素的padding设置为百分比，无论是垂直还是水平，都会相对于直接父元素的宽度，与父元素的高度无关。

.parent{
    width: 300px;
    height: 400px;
    background: #aaaaaa;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
    padding-top: 20%;
    padding-left: 20%;
}

打开控制台并查看子元素。 我们可以看到 padding-top 和 padding-left 都是父元素宽度的 20% – 60px：

4、子元素的边距

子元素的外边距和内边距是相同的。 如果子元素的边距设置为百分比，无论是垂直还是水平，它都将相对于直接父元素的宽度。

5、子元素的border-radius

Border-radius 设置为百分比并且相对于其自身宽度。

.parent{
    width: 200px;
    height: 200px;
    background: #aaaaaa;
}
.child{
    width: 50%;
    height: 50%;
    background: red;
    border-radius: 50%;
}

em 和 rem

em 和 rem 比 px 更灵活。 它们都是相对长度单位，它们之间的区别可以用一句话概括：em是相对于父元素，rem是相对于根元素。

em 是相对于父元素的 font-size，rem 是相对于 html 元素的 font-size。

大众/大众

vw/vh是与视图窗口相关的单位。 vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度。 除了vw和vh之外，还有两个相关的单位：vmin和vmax。

单位含义

大众汽车

相对于视口宽度，视口宽度为100vw

维赫

相对于窗口的高度，窗口的高度为100vh

最小电压

vw 和 vh 中较小的一个

最大速度

vw 和 vh 中较大的一个

这个单位与百分比非常相似，但也有区别：

单位含义

它们大多数与祖先元素相关，但也与它们自身相关（border-radius、translate 等）

大众/虚拟机

相对于视口的大小

响应式布局实践

好了，说了这么多，我们现在可以结合上面的理论知识来完成一个响应式布局的demo了。 下面我会贴出一些代码来谈谈一些想法。 完整的代码放在我的github上。

初始布局

首先，我们进行总体布局。 这个demo主要分为三个部分：头部、内容、底部，类似于一个简单的企业官网。

    
    
    
    
    



    
    

        

            

                logo
            
            
        
    
    
    

        

        

            
            

                

                

                    

                
            
            
            

                

                

                

            
            
            

                

                

                

                

                

                

            
        
    
    
    

在这个demo中响应式，最初的css代码是在1920px处编写的，这就是我们最初的样式。

初始样式代码比较长，就不贴在文章里了。 参见这里>>>index.css

我们先看一下初步的效果：

在实际开发过程中，有些模块包含了阻止这些模块无限制缩减的内容。 所以在index.css的初始布局中，我们限制了一些模块的大小，设置了min-width。

中大屏适配

前面我们提到，布局划分点要根据实际项目来划分。 我对这个项目做了以下划分。 大家也可以根据自己的想法来划分。

1201像素~1280像素

我们先来看看当宽度调整为1201px时会发生什么：

我们可以看到有些模块超出了父元素的宽度，使得页面不均匀，所以我们需要调整布局：

@media screen and (max-width: 1280px) {
     /* 内容一  */
    .content-box1{
        flex-wrap: wrap;
        height: 650px;
    }
    .content-box1-text{
        width: 90%;
        margin: 0 auto;
    }
    .content-box1-img{
        display: flex;
        align-items: center;
        margin: 0 auto;
    }
}

我们看一下布局：

992像素~1200像素

此时会发生什么：

我们看到布局又乱了，然后我们需要继续调整布局：

@media screen and (min-width: 992px) and (max-width: 1200px) {
    /* 内容二 */
    .content-box2{
        height: 400px;
    }
    .content-box2-text{
        height: 300px;
        min-width: 200px;
    }
    /* 内容三 */
    .content-box3{
        justify-content: space-around;
    }
}

我们看一下布局：

768像素~991像素

在这个分割点上，也会出现布局问题，需要进一步调整。 由于是重复操作，这里就不包含纹理和代码了。 我们可以重点进行以下调整。

手机适配

在boostrap的网格系统中，屏幕被归类为手机。 我们也可以以此作为参考。 这时布局的调整不仅仅是内容的调整，更是我们导航栏的改变——从水平导航栏变成了点击时出现的垂直导航栏（具体要求，具体实现，这里只是一个一般变换方法）。 如下所示：

我们需要做什么才能达到上图的效果呢？

写一个按钮，比如右图右上角的按钮。 是不是看起来很眼熟？ 将导航栏样式从水平导航栏重写为垂直导航栏。 使用js通过点击button.button来切换显示和隐藏导航栏

我们首先在类名 nav-list 的末尾添加以下 HTML 代码：

...

    

        
        
        
    

...

然后美化按钮样式：

@media screen and (max-width: 767px){
    ...
    .phone-show{
        display: block;
        height: 60px;
        width: 60px;
    }
    .nav-btn{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .nav-btn span{
        display: inline-block;
        height: 10px;
        width: 60px;
        background: coral;
    }
}

看看效果：

导航样式修改

我们可以巧妙地利用相对定位和绝对定位的关系来修改导航栏的样式和位置：

@media screen and (max-width: 767px){
    .header-box{
        position: relative;
    }
    
    ...
    
    /* 手机端样式 */
    .main-nav-item{
        display: none;
        position: absolute;
        width: 10rem;
        right: 0;
        top: 8rem;
        border-radius: 0 0 .5rem .5rem;
    }
    .nav-main-list{
        width: 100%;
        background: #ffffff;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 0 0 .5rem .5rem;
    }
    .list-item{
        width: 100%;
        margin: 0 1rem;
        border-bottom: 1px solid #eeeeee;
    }
}

看看效果：

导航栏显示和隐藏切换

利用js来控制切换的思路很简单。 当我们打开网页时，我们首先隐藏导航，然后定义一个变量hide。 初始值为 true。 点击按钮时判断：如果hide值为true，则让导航显示；如果hide值为true，则让导航显示； 否则隐藏。

let btn = document.getElementById("nav-btn");
let  nav =  document.getElementById("nav-item");
let hide = true;
btn.addEventListener('click', function () {
    if (hide){
        nav.style.display = "block";
        hide = false;
    } else {
        nav.style.display = "none";
        hide = true;
    }
});

最后，经过一些细节的调整，我们的响应式布局demo就初步完成了。 在我们日常的开发中，一般不会那么简单，所以我们还是根据实际情况进行调整，以满足实际的需求。

完整演示请点击这里——演示地址

参考

自适应和响应式之间有什么区别？ 你知道吗？

响应式和自适应有什么区别？

响应式布局常用解决方案比较（媒体查询、百分比、rem 和 vw/vh）

终于

文章如有不准确或错误的地方，还请指出~

西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。