Layout 为什么这种布局效果如此缓慢，尤其是在移动设备上？_Layout_Html_Css

Layout 为什么这种布局效果如此缓慢，尤其是在移动设备上？

layout html css

Layout 为什么这种布局效果如此缓慢，尤其是在移动设备上？,layout,html,css,Layout,Html,Css,下面的代码使用flex显示一些充当按钮的div：重点是为简单游戏创建基本布局这种编码方式会产生两个问题，第一个是执行速度，第二个是每个容器百分比的管理除了款式之外，在笔记本电脑上也能做到这一点，但在移动设备上无法使用我错过了什么？提前谢谢 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></ti

下面的代码使用flex显示一些充当按钮的div：重点是为简单游戏创建基本布局

这种编码方式会产生两个问题，第一个是执行速度，第二个是每个容器百分比的管理

除了款式之外，在笔记本电脑上也能做到这一点，但在移动设备上无法使用

我错过了什么？提前谢谢

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">

      html, body{
        width: 100%;
        height: 100%;
      }
      .maincontent{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
      }
      .columncontent{
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .item{
        height: 100%;
      }

      .item:hover{
        border : 12px solid white;
      }

      .a{
        background: blue;
      }
      .b{
        background: red;
      }
      .c{
        background: black;
      }
      .d{
        background: green;
      }
    </style>
  </head>
  <body>
<div class="maincontent">
    <div class="columncontent">
      <div class="item a" onclick="handle(this)"></div>
      <div class="item b" onclick="handle(this)"></div>
      <div class="item c" onclick="handle(this)"></div>
      <div class="item d" onclick="handle(this)"></div>
    </div>
    <div class="columncontent">
      <div class="item a" onclick="handle(this)"></div>
      <div class="item b" onclick="handle(this)"></div>
      <div class="item c" onclick="handle(this)"></div>
      <div class="item d" onclick="handle(this)"></div>
    </div>
    <div class="columncontent">
      <div class="item a" onclick="handle(this)"></div>
      <div class="item b" onclick="handle(this)"></div>
      <div class="item c" onclick="handle(this)"></div>
      <div class="item d" onclick="handle(this)"></div>
    </div>
    <div class="columncontent">
      <div class="item a" onclick="handle(this)"></div>
      <div class="item b" onclick="handle(this)"></div>
      <div class="item c" onclick="handle(this)"></div>
      <div class="item d" onclick="handle(this)"></div>
    </div>
</div>
    <script type="text/javascript">
        var handle = function(el){
          if(el.style.background=="green")
            el.style.background="yellow";
          else
            el.style.background = "green";
        }
    </script>
  </body>
</html>


html，正文{
宽度：100%；
身高：100%；
}
.主要内容{
显示器：flex；
弯曲方向：行；
宽度：100%；
身高：100%；
}
.专栏内容{
宽度：25%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.项目{
身高：100%；
}
.项目：悬停{
边框：12px纯白；
}
.a{
背景：蓝色；
}
.b{
背景：红色；
}
c{
背景：黑色；
}
博士{
背景：绿色；
}
变量句柄=函数（el）{
if（el.style.background==“绿色”）
el.style.background=“黄色”；
其他的
el.style.background=“绿色”；
}