1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>响应式布局：媒体查询</title>
  9. </head>
  11. <body>
  12.     <!-- 媒体：屏幕，打印机
  13. 查询：查询当前的屏幕的宽度变化 -->
  14.     <!-- 布局前提：宽度受限，高度不受限的空间进行布局。高和宽至少一个受限 -->
  15.     <button class="btn small">按钮1</button>
  16.     <button class="btn middle">按钮2</button>
  17.     <button class="btn large">按钮3</button>
  19.     <table border="1" width="500">
  20.         <caption>
  21.             广州市第八小学五年级六班
  22.         </caption>
  23.         <!-- 表头 -->
  24.         <thead>
  25.             <tr style="font-weight: bolder; text-align: center">
  26.                 <th>id</th>
  27.                 <th>name</th>
  28.                 <th>email</th>
  29.                 <th>password</th>
  30.             </tr>
  31.         </thead>
  32.         <!-- 表格主体 -->
  33.         <!-- tr*5>td*4{xx} -->
  35.         <tbody style="font-weight: bolder; text-align: center">
  36.             <tr>
  37.                 <td rowspan="2" bgcolor="cyan">xx</td>
  38.                 <td>xx</td>
  39.                 <td>xx</td>
  40.                 <td>xx</td>
  41.             </tr>
  42.             <!-- 第2行 -->
  43.             <!-- 水平方向合并 -->
  44.             <tr>
  45.                 <!-- <td>xx</td> -->
  46.                 <td>xx</td>
  47.                 <!-- <td colspan="3" bgcolor="lightgreen">xx</td>/ -->
  48.                 <td>xx</td>
  49.                 <td>xx</td>
  50.             </tr>
  51.             <!-- rowspan="3" bgcolor="cyan" -->
  52.             <tr>
  53.                 <!-- 水平方向合并 -->
  54.                 <td colspan="4" bgcolor="lightgreen">xx</td>
  55.                 <!-- <td>xx</td>
  57.                 <td>xx</td>
  58.                 <td>xx</td> -->
  59.             </tr>
  60.             <tr>
  61.                 <td rowspan="2" bgcolor="cyan">xx</td>
  62.                 <td>xx</td>
  63.                 <td>xx</td>
  64.                 <td>xx</td>
  65.             </tr>
  66.             <tr>
  67.                 <!-- <td>xx</td> -->
  68.                 <td>xx</td>
  69.                 <td>xx</td>
  70.                 <td>xx</td>
  71.             </tr>
  72.         </tbody>
  73.         <!-- 表尾 (表头和表尾都是可选的)-->
  74.         <tfoot>
  75.             <tr style="font-weight: bolder; text-align: center">
  76.                 <td>yy</td>
  77.                 <td colspan="3">yy</td>
  78.                 <!-- <td>yy</td>
  79.                 <td>yy</td> -->
  80.             </tr>
  81.         </tfoot>
  82.     </table>
  83. </body>
  85. <style>
  86.     td,
  87.     th {
  88.         border: 1px solid #000;
  89.     }
  91.     table {
  92.         border-collapse: collapse;
  93.         width: 90%;
  94.         text-align: center;
  95.         margin: 2em auto;
  96.     }
  98.     table caption {
  99.         font-weight: bolder;
  100.         margin-bottom: 1em;
  101.     }
  103.     tabel thead {
  104.         background-color: rgb(128, 0, 0);
  105.     }
  107.     html {
  108.         font-size: 10px;
  109.     }
  111.     .btn {
  112.         background-color: seagreen;
  113.         color: white;
  114.         border: none;
  115.         outline: none;
  116.     }
  118.     .btn:hover {
  119.         cursor: pointer;
  120.         opacity: 0.8;
  121.         transition: 0.3s;
  122.     }
  124.     .btn.small {
  125.         font-size: 1.2rem;
  126.     }
  128.     .btn.middle {
  129.         font-size: 1.6rem;
  130.     }
  132.     .btn.large {
  133.         font-size: 1.8rem;
  134.     }
  135.     /* 只要动态修改rem，就可以实现动态的改变按钮大小
  136.     移动优先：从最小的屏幕开始进行适配 */
  137.     /* 小于375px */
  139.     @media only screen and (max-width: 374px) {
  140.         html {
  141.             font-size: 12px;
  142.         }
  143.     }
  144.     /* 375-414px */
  146.     @media only screen and (min-width: 375px) and (max-width: 414px) {
  147.         html {
  148.             font-size: 14px;
  149.         }
  150.     }
  151.     /* 大于414px */
  153.     @media only screen and (min-width: 415px) {
  154.         html {
  155.             font-size: 16px;
  156.         }
  157.     }
  158. </style>
  160. </html>

更多相关文章

  1. 开关按钮ToggleButton和开关Switch
  2. Android开发菜单布局之表格布局示例
  3. Android中级教程之----Log图文详解(Log.v,Log.d,Log.i,Log.w,Log
  4. Android中级教程之----Log图文详解(Log.v,Log.d,Log.i,Log.w,Log
  5. Android(安卓)Log详解！
  6. Android的单选按钮
  7. 【Android(安卓)UI设计与开发】第15期：顶部标题栏（六）实现悬浮式顶
  8. Android和J2ME按钮接口之简单对比
  9. Android(安卓)按钮点击事件监听的3重方式

随机推荐

  1. Android studio 启动出现错误AAPT: error
  2. Android 复习笔记之图解BroadcastReceive
  3. android aidl进程间通信
  4. android 获取应用程序占用的内存大小
  5. Android 杂记
  6. Java建造者模式，Android建造者模式的Alert
  7. Android中的ClassLoader与dex文件加密实
  8. Android高手进阶教程(十七)之---Android
  9. android 跳转到应用通知设置界面
  10. Android(安卓)处理空列表的方法(必看篇)