Question

我正在制作一个混合html，js和css的小小的井字游戏，但是，我希望它的尺寸适合任何移动或计算机设备。所以，我需要在px中确定我的div的大小，而不是在%中确定。但是有一个小问题：与整个页面相关的百分比，不仅仅是div。我试图使html和body标签的高度和宽度等于100％，但是没有用。

以下是重要的代码

html, body{
    height: 100%;
    width: 100%; 
}

body {
    background-color: #9c9f84;
    margin:0;
    font-family: verdana;
    font-size: 14px;
    text-align: center;
}

#myDiv { /* there is where the percentage is massed up */
    border-radius: 5px;
    background-color: #e5e4d7;
    height: 100%;
    width: 100%;
    position: absolute;
    right: 10%;
    top:25%;
}

Answer 1

宽度和填充的组合怎么样，假设您在保持正方形的纵横比之后再进行。请参阅此小提琴以获取快速示例： https://jsfiddle.net/L6uz24gv/2/

＆＃13;

.tile {
  background: #ccc;
  display: inline-block;
  margin: 1%;
  width: 30%;
  padding-bottom: 30%;
}

＆＃13;

<div id="tic-tac-toe">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

＆＃13;

百分比如何在高度上工作

1 个答案: