使用 CSS 网格和 Flexbox 的响应式网页设计

使用 css 网格和 flexbox 的响应式网页设计

响应式网页设计是一种开发网站的方法，使其可以在各种设备和屏幕尺寸上正常运行。响应式设计不必为不同设备创建多个版本的网站，而是使用灵活的网格和布局、媒体查询和流畅的图像来跨所有平台提供更好的用户体验。

为什么响应式网页设计很重要？

随着世界各地越来越多的人使用手机和平板电脑浏览互联网，拥有响应式网站不再是一种选择，而是一种必需。响应式设计允许消费者无缝访问内容，无论他们使用什么设备，从而提高可用性。它还通过确保内容在视觉上连贯且易于跨设备阅读来改善用户体验，这可以减少挫败感并鼓励互动。此外，响应式设计可以保证网站面向未来，让它们适应新设备，而无需进行大量重新设计。

今天，我们将了解响应式网页设计的基础知识，并特别关注两种强大的 css 技术：flexbox 和 css grid。我们将使用带有彩色框和数字的简单网站来展示这些布局如何适应不同的屏幕尺寸。

响应式网页设计简史

网格布局的 html:

       <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>color grid</title><link rel="stylesheet" href="styles.css"><div class="grid-container">         <div class="grid-item" style="background-color: #ff5733;">1</div>         <div class="grid-item" style="background-color: #33ff57;">2</div>         <div class="grid-item" style="background-color: #3357ff;">3</div>         <div class="grid-item" style="background-color: #ff33a1;">4</div>         <div class="grid-item" style="background-color: #33fff1;">5</div>         <div class="grid-item" style="background-color: #ffa133;">6</div>     </div>   

html:

html 标记创建一个响应式容器（网格容器）和具有不同数字和背景颜色的彩色框（网格项）。视口元标记允许布局在不同设备上缩放。

网格布局的css:

/* styles.css */ body {     margin: 0;     font-family: arial, sans-serif;     background: #f0f0f0; }  .grid-container {     display: grid;     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));     gap: 10px;     padding: 20px; }  .grid-item {     display: flex;     justify-content: center;     align-items: center;     height: 100px;     color: #fff;     font-size: 2em;     border-radius: 8px; } 

css:

网格布局的 css 使用不同的网格属性来提高响应速度。显示方式：网格；声明将带有 grid-container 类的元素设置为网格容器，以便我们可以利用网格提供的所有功能。网格模板列：repeat(auto-fit, minmax(100px, 1fr));属性定义网格中列的结构：它根据可用空间自动调整列数，每列的最小宽度为 100 像素，最大为可用空间的 1 分数 (1fr)。这种设计允许网格适应不同的屏幕尺寸，这样网格项目就不会溢出或产生难看的间隙。间隙：10px；属性对网格项应用一致的间距。最后，我们使用 display: flex; 堆叠 grid-item 元素。并将其内容居中 justify-content: center;和对齐项目：居中。这样，每个项目都组织良好且平衡。

1. 动态列数：网格自动调整列数以适应视口宽度，项目最小为 100px。
2. 灵活调整大小：自动调整让盒子在需要时重新排列和重新排列，让一切看起来更有条理。
3. 媒体查询：虽然实际上没有写在这里，但网格元素在不同屏幕尺寸下的行为方式通过使用响应式网格属性演示了媒体查询的概念。

flexbox 布局的 html:

       <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>color row</title><link rel="stylesheet" href="styles.css"><div class="flex-container">         <div class="flex-item" style="background-color: #ff5733;">1</div>         <div class="flex-item" style="background-color: #33ff57;">2</div>         <div class="flex-item" style="background-color: #3357ff;">3</div>         <div class="flex-item" style="background-color: #ff33a1;">4</div>     </div>   

html:

与网格示例类似，此处的 html 创建一个弹性容器，其中包含显示彩色数字的弹性项目框。

flexbox 布局的 css :

/* styles.css */ body {     margin: 0;     font-family: Arial, sans-serif;     background: #f5f5f5; }  .flex-container {     display: flex;     flex-wrap: wrap;     justify-content: center;     padding: 20px;     gap: 10px; }  .flex-item {     display: flex;     justify-content: center;     align-items: center;     height: 100px;     width: 100px;     color: #fff;     font-size: 2em;     border-radius: 8px; } 

css： 这里的 css 使用 flexbox 属性来创建适应各种屏幕尺寸的响应式布局。显示屏：柔性； .flex-container 中提供其子元素或（flex 项目）flexbox 功能。 flex-wrap：包裹；如果超过容器的宽度，属性允许项目流到多行。调整内容：居中；属性将弹性项目沿主轴居中，因此无论项目数量如何，都有一个平衡的布局。间隙：10px；属性在项目之间引入了统一的间距，从而改善了整体组织。每个.flex-item也是一个flex容器，使用display: flex;允许进一步对齐其内部内容，使用 justify-content: center; 垂直和水平居中；和对齐项目：中心；。高度固定尺寸：100px；宽度：100px；提供一致性，而这些属性的组合使布局具有令人愉悦的外观，同时适应不同设备的需求。

1. flex wrapping：flex-wrap：包裹；属性使框在无法放入行时移动到下一行，以适应不同的视口宽度。
2. 居中项目：无论屏幕大小如何，项目都保持居中，从而改善整体呈现效果。
3. 固定尺寸：盒子具有特定的尺寸，但它们会根据可用空间进行包裹和重新调整，从而实现响应式布局。

``
来源：
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-us/docs/learn/css/css_layout
https://kinsta.com/blog/responsive-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=for%20a%20major%20layout%20style,helpful%20when%20working%20with%20rows.