Copyright © 1998-2023 maxiaoke.com All rights reserved.

当前位置:　 首页>> 技术小册>> Web响应式布局入门到实战

小册名称：Web响应式布局入门到实战

实现效果：三个div，当屏幕尺寸较大时，一行显示，缩小后显示两个并换行，再缩小一行只显示一个。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .div0{
  10.             width:100%;
  11.             height:500px;
  12.             border:1px solid #ccc;
  13.         }
  14.         /* 子div浮动一行显示 */
  15.         .div0 div{
  16.             float:left;
  17.             height:200px;
  18.         }
  19.         /* 一行3个div */
  20.         @media screen and (min-width:400px){
  21.             .div0 div{
  22.                 width: 33.3%;
  23.             }
  24.             .div0 div:nth-child(1){
  25.                background-color: red; 
  26.             }
  27.             .div0 div:nth-child(2){
  28.                background-color: green; 
  29.             }
  30.             .div0 div:nth-child(3){
  31.                background-color: blue; 
  32.             }
  33.         }
  34.         /* 两行3个div */
  35.         @media screen and (min-width:300px) and (max-width:399px){
  36.             .div0 div{
  37.                 width: 50%;
  38.             }
  39.             .div0 div:nth-child(1){
  40.                background-color: red; 
  41.             }
  42.             .div0 div:nth-child(2){
  43.                background-color: green; 
  44.             }
  45.             .div0 div:nth-child(3){
  46.                background-color: blue; 
  47.             }
  48.         }
  49.         /* 三行3个div */
  50.         @media screen and (min-width:200px) and (max-width:299px){
  51.             .div0 div{
  52.                 width: 100%;
  53.             }
  54.             .div0 div:nth-child(1){
  55.                background-color: red; 
  56.             }
  57.             .div0 div:nth-child(2){
  58.                background-color: green; 
  59.             }
  60.             .div0 div:nth-child(3){
  61.                background-color: blue; 
  62.             }
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div class="div0">
  68.         <div></div>
  69.         <div></div>
  70.         <div></div>
  71.     </div>
  73. </body>
  74. </html>

该分类下的相关小册推荐：

uniapp快速入门与实战
uniapp快速入门与实战
WebGL开发指南
WebGL开发指南
web前端面试完全指南
web前端面试完全指南
vue高级应用开发与构建
vue高级应用开发与构建