本文共 1398 字，大约阅读时间需要 4 分钟。
移动端显示需要加"视口"，使当前页面宽度等于设备宽度。元标签 viewport 的设置至关重要，能够确保页面在不同设备上以最佳比例显示。以下是整体布局的默认样式：
html元素默认字体大小为 10px；
body背景颜色为 #e8e8e8，字体大小为 1.6rem。页面内容主要由以下部分组成：
头部区域：
使用 Flexbox 布局，包含多个导航选项，如"推荐"、"热点"、"视频"、"娱乐"、"军事"等，样式为 flex布局，子项均为 flex: 1。主内容区域：
包含两种类型的单元格：cell1 和 cell2。内容单元格样式：
cell1 和 cell2 具有共同的样式，包括内边框、背景颜色及 padding。其中 cell1 中心区域采用 Flexbox 列布局，子项均占据 1/3 的比例。cell2 的右侧区域则采用 flex 行布局，包含文字内容和图片。以下是部分样式定义：
导航栏样式：
.bd-header span { padding: 0.3rem; }.bd-header span.current { color: #cccccc; }内容样式：
.bd-content { margin-top: 5rem; }.bd-content .cell1, .cell2 { padding: 0.5rem; background-color: #ffffff; border-bottom: 0.1rem solid #e8e8e8; }.bd-content .cell1-center { display: flex; justify-content: space-around; align-items: center; }.bd-content .cell1-center div { flex: 1; padding: 1rem; }.bd-content .cell1-center div img { width: 100%; }.bd-content .cell2 { display: flex; }.bd-content .cell2-left { flex: 2; }.bd-content .cell2-left img { width: 100%; height: 100%; }.bd-content .cell2-right { flex: 4; display: flex; flex-direction: column; margin-left: 0.1rem; }.bd-content .cell2-right p:first-child { flex: 1; height: 2rem; line-height: 2.5rem; overflow: hidden; }整体布局效果如附图所示，页面内容通过 Flexbox 和 Grid 布局实现响应式设计，确保不同设备上都能良好显示。
转载地址：http://xgjv.baihongyu.com/