Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【CSS】媒体查询 -- 屏幕宽度自适应：@media
Blogger Information
Blog 94
fans 0
comment 0
visits 92710
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【CSS】媒体查询 -- 屏幕宽度自适应：@media
可乐随笔
Original
720 people have browsed it

媒体查询

媒体查询的宽度顺序：

  1. 移动端：从小往大小
  2. PC端：反过来，从大向小写
  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>媒体查询</title>
  8. </head>
  9. <body>
  10.     <button class="btn small">按钮1</button>
  11.     <button class="btn middle">按钮2</button>
  12.     <button class="btn large">按钮3</button>
  14.     <style>
  15.         /* REM
  16.         root === html */
  17.         html{
  18.             /* 1rem = 10px; */
  19.             font-size: 10px;
  20.         }
  21.         .btn{
  22.             background:green;
  23.             color: white;
  24.             border: none;
  25.             outline: none;
  26.         }
  27.         .btn:hover{
  28.             cursor: pointer;
  29.             opacity: 0.8;
  30.             transition: 0.3;
  31.         }
  32.         .btn.small{
  33.             font-size: 1.2rem;
  34.         }
  35.         .btn.middle{
  36.             font-size: 1.6rem;
  37.         }
  38.         .btn.large{
  39.             font-size: 1.8rem;
  40.         }
  42.         /* 媒体查询 */
  43.         /* 1rem = 10px; , 1rem = 12px  */
  44.         /* < 375px, 1rem = 12px; */
  45.         /* 屏幕小于(最大)375px */
  46.         @media (max-with){
  47.             html{
  48.                 font-size: 12px;
  49.             }
  50.         }
  51.         @media (min-width:375px) and (max-width:414px){
  52.             html{
  53.                 font-size: 14px;
  54.             }
  55.         }
  56.         @media (min-with:415px){
  57.             html{
  58.                 font-size: 16px;
  59.             }
  60.         }
  62.         /* 媒体查询的宽度顺序：
  63.         1. 移动端：从小往大小
  64.         2. PC端：反过来，从大向小写 
  65.         */
  66.     </style>
  67. </body>
  68. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：做笔记整理博客的话, 不用选择作业提交, 若是提交作业, 一个作业只需要一篇博客就可以了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post