CSS Grid Game

网格布局可使用智能回流元素(Intelligently Reflow Elements),比如典型游戏界面五大区块:标题、统计、主面板、得分、控制区。

区域 描述
title 标题区,标题区和主面板对齐。
stats 统计区,统计区显示在标题区之下。
score 得分区,得分区和统计区在列方向对齐。
board 主面板区,主面板在统计区和标题区右侧。
ctrls 控制区,控制区集中放置在主面板下方。

当游戏页面达到最低高度时,主面板底部和统计区底部对齐,否则主面板将扩展到屏幕可用空间。

横屏布局

横屏时界面被划分为2列3行的网格

横屏时列宽设置

grid-template-columns:auto minmax(min-content, 1fr);
列号 列宽 描述
第1列 auto 根据内容自动控制列宽
第2列 minmax(min-content, 1fr) 使用剩余空间,列宽不小于主面板区和控制区的最小宽度。

横屏时行高设置

 grid-template-rows:auto minmax(min-content, 1fr) auto;
行号 行宽 描述
第1行 auto 根据内容自动控制列宽
第2行 minmax(min-content, 1fr) 使用剩余空间,列宽不小于主面板区和控制区的最小行高。
第3行 auto 根据内容自动控制列宽

横屏时的区块分布

使用grid-template-areas定义区域,取值中每个字符串表示一行,字符串中每个单词用于定义区域名称,字符串中单词的数量则用于确定列的数量,每个字符串中单词数量必须相同。

grid-template-areas:
  "title board" 
  "stats board" 
  "score ctls";
横屏

竖屏布局

竖屏时的区块分布

grid-template-areas:
  "title stats" 
  "score stats" 
  "board board" 
  "ctrls ctrls";
竖屏

完整代码

<div class="flex">
  <div class="layout">
    <div class="title flex box">title</div>
    <div class="score flex box">score</div>
    <div class="stats flex box">stats</div>
    <div class="board flex box">board</div>
    <div class="control flex box">control</div>
  </div>
</div>
  • 通过网格布局和媒体查询结合,无需修改文档结构即可实现重新排列布局的顺序。
  • 游戏界面中每个区块采用网格线来定义,若占用多行或多列则采取跨行或跨列的方式来实现。
*, *:before, *:after{box-sizing:border-box; margin:0; padding:0;}
.flex{display:flex; justify-content:center; align-items:center;}
.box{border:1px dashed #ddd; padding:.5em;}
.area{background-color:rgba(255, 0, 0, .5); padding:1em; border-radius:.5em; color:#fff; text-align:center; height:100%;}

.layout{background-color:#f9f9f9; margin:1em;}
.title{grid-area:title;}
.stats{grid-area:stats;}
.score{grid-area:score;}
.board{grid-area:board; height:50vh;}
.ctrls{grid-area:ctrls;}

@media (orientation:landscape){
  .layout{
    display:grid;
    grid-template-columns:auto minmax(min-content, 1fr);
    grid-template-rows:auto minmax(min-content, 1fr) auto;
    grid-template-areas:"title board" "stats board" "score ctls";
  }
.title{gird-column:1; grid-row:1;}
.stats{grid-column:1; grid-row:2;}
.score{grid-column:1; grid-row:3;}
.board{grid-column:2; grid-row:1 / span 2;}
.ctrls{grid-column:2; grid-row:3 / span 2;}
}

@media (orientation:portrait){
  .layout{
    display:grid;
    grid-template-columns: auto minmax(min-content, 1fr);
    grid-template-rows: auto auto minmax(min-content, 1fr) auto;
    grid-template-areas:"title stats" "score stats" "board board" "ctrls ctrls";
  }
}
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读