使用CSS Flexbox与Media Query可高效实现响应式布局，通过flex弹性布局让子元素自动调整大小和位置，结合media query根据不同设备屏幕尺寸应用样式规则，适配手机、平板和桌面端；容器设置display: flex启用弹性布局，子项用flex属性控制伸缩比例，flex-direction定义主轴方向，justify-content和align-items设置对齐方式，flex-wrap允许换行，gap定义间距；配合媒体查询断点（手机≤767px、平板768-1023px、桌面≥1024px），在不同视口下调整flex-direction和flex值实现三列、两列或单列布局；导航栏实例中，大屏时导航链接水平分布，小屏时堆叠垂直排列，展现灵活的响应式设计能力。
使用 CSS Flexbox 与 Media Query 结合，可以高效实现响应式布局。Flex 弹性布局让容器内部元素能自动调整大小和位置，而 Media Query 能根据设备屏幕尺寸应用不同的样式规则，两者结合可适配手机、平板、桌面等多种设备。
flex 布局基础
Flex 容器通过 display: flex 启用弹性布局，子元素会沿主轴方向排列，支持动态伸缩。
常用属性：flex-direction：控制主轴方向（row / column）flex-wrap：允许换行（wrap）justify-content：主轴对齐方式align-items：交叉轴对齐方式flex：子项的伸缩比例（如 flex: 1）
示例：创建一个自适应容器
.container { display: flex; flex-wrap: wrap; gap: 16px;}.item { flex: 1 1 200px; /* 最小宽度 200px，可伸缩 */}
media query 断点设置
Media Query 根据视口宽度切换布局。常见断点：
立即学习“前端免费学习笔记（深入）”；
侧栏菜单模块化响应式模板
响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该
58 查看详情 手机：max-width: 767px平板：768px ~ 1023px桌面：min-width: 1024px
配合 flex 调整布局结构：
/* 桌面端：三列布局 */@media (min-width: 1024px) { .container { flex-direction: row; } .item { flex: 1; }}/ 平板：两列 /@media (max-width: 1023px) and (min-width: 768px) {.container {flex-direction: row;}.item {flex: 0 0 calc(50% - 8px);}}
/ 手机：单列垂直排列 /@media (max-width: 767px) {.container {flex-direction: column;}.item {flex: 1 1 100%;}}
响应式导航栏实例
利用 flex + media query 实现折叠式导航：
.nav { display: flex; justify-content: space-between; align-items: center;}.nav-links {display: flex;list-style: none;gap: 20px;}
/ 小屏下堆叠显示 /@media (max-width: 767px) {.nav {flex-direction: column;text-align: center;}.nav-links {margin-top: 10px;flex-direction: column;}}
基本上就这些。灵活运用 flex 的弹性特性与 media query 的条件判断，能构建出自然流畅的响应式界面，无需依赖框架也能满足大多数布局需求。
以上就是css flex与media query结合实现响应式设计的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1017783.html
微信扫一扫 
支付宝扫一扫 
