响应式布局

一、响应式布局简介：

    1、网页设计方法 根据不同的设备 屏幕尺寸和分辨率 自动调整布局和现实效果  用户体验佳

    2、是流式布局的特性，根据屏幕大小自动调整布局，适应不同屏幕尺寸

    3、媒体查询 关键技术 根据不同的设备（高、宽、分辨率）采用不同样式

    媒体查询的语法：   

         @media screen and (max-width: 768px) {

       /* 在屏幕宽度小于等于 768px 时应用的样式 */

      .container {

         width: 100%;

         padding: 10px;

       }

     }



     @media screen and (min-width: 769px) and (max-width: 1024px) {

       /* 在屏幕宽度大于 768px 且小于等于 1024px 时应用的样式 */

      .container {

         width: 80%;

         padding: 20px;

       }

     }



     @media screen and (min-width: 1025px) {

       /* 在屏幕宽度大于 1024px 时应用的样式 */

      .container {

         width: 70%;

         padding: 30px;

       }

     }

   

二、实现响应式布局：

    1、使用媒体查询，根据屏幕宽度和分辨率，动态调整网页布局和样式。

    2、使用弹性布局（flex）和网格布局（grid）

    3、使用响应式框架

三、流式布局（Fluid Layout）和 弹性布局（flexbox）区别：

    流式布局：关注的是元素的宽度和高度，根据屏幕宽度和分辨率，动态调整元素大小。

    弹性布局：是一种CSS的布局模式，控制元素在容器中的排列方式、对齐方式、换行方式等。

四、grid与flex布局区别：

    相同点：

        1.容器与子元素：都是基于容器和子元素的概念进行布局的

        2.响应式布局

    不同点：

        1.flex布局是单一轴线布局，只能水平或者垂直方向，而grid布局是双轴线，可以同时水平和垂直

        2.子元素排列：flex-direction决定，默认水平，grid通过网格行和列进行排列，使用grid-template-rows和grid-template-columns来定义

        3.flex：1来分配空间，grid使用grid-template-areas、grid-template-rows和grid-template-columns、grid-area实现更复杂的布局

        4.网格布局对齐方式： 水平justify-content: center;垂直align-items: center;