本文介绍了网页布局的重要性，详细讲解了响应式布局的移动设备优先原则和栅格系统，以及Flex弹性布局的基本概念和核心属性，如flex-direction、flex-wrap、justify-content和align-items等。
一、了解网页布局
1.1、什么是网页布局
网页布局是一种定义网站的结构模式(或框架)。
它具有为网站所有者以及用户构造网站上存在的信息的作用。为网页内的导航提供了清晰的路径，并将网站的最重要的元素置于网站的正面和中心。
网页布局分为很多种方式，一般分为:头部区域、菜单导航区域、内容区域、底部区域。
1.2、为什么要进行网页布局
良好的布局可以使用户留在网站上,它可以轻松的访问重要信息并直观的查找它们。不良的布局会使用户感到失望，然后因为找不到所需内容而离开网站
二、响应式布局
响应式布局比较有代表性的前端UI框架：如Bootstrao、LayUI等
2.1、移动设备优先
为了确保适当的绘制和触屏的缩放，需要在<head>之中添加viewport元素数据标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.2、栅格布局
使用@media查询，可以针对不同媒体类型定义不同的样式
超小屏幕（手机，小于768px）
最低0.47元/天 解锁文章
875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
