Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型特征和媒体查询
Blogger Information
Blog 9
fans 0
comment 0
visits 3945
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
盒模型特征和媒体查询
恒儿哥哥
Original
313 people have browsed it

媒体查询

代码：

  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.     <style>
  9.         button{
  10.             background-color:bisque;
  11.         }
  12.         button:hover{
  13.             cursor:help;
  14.             opacity: 0.1;
  15.             transition: 0.3s;
  16.             background-color: aqua;
  17.         }
  18.         .small  {
  19.             font-size: 3rem;
  20.         }
  21.         .large{
  22.             font-size: 4rem;
  23.         }
  24.         @media (max-width:300px) {
  25.             html{
  26.                 font-size: 10px;
  27.             }
  28.         }
  29.         @media (min-width:301px) and (max-width:500px) {
  30.             html {
  31.                 font-size: 30px;
  32.             }
  33.         @media (min-width:501px) {
  34.             html{
  35.                 font-size: 50px;
  36.             }  
  37.         }
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <button class="small">小</button>
  43.     <button class="large">大</button>
  44. </body>
  45. </html>

rem和em的区别：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <!-- px: 像素,绝对单位, 1in = 96px -->
  11.     <!-- em,rem,vh,vw: 相对单位 -->
  12.     <div>
  13.         <span>Hello</span>
  14.     </div>
  15.     <style>
  16.         html {
  17.             font-size: 10px;
  18.             /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
  19.             /* 因为一个页面,只有一个根元素, html  */
  20.             /* 1rem = 10px */
  21.         }
  22.         div {
  23.             /* font-size: 32px; */
  24.             /* 1em = 16px */
  25.             /* 32px = 2em */
  26.             font-size: 3rem;
  27.         }
  28.         div span {
  29.             /* font-size: 2em; */
  30.             /* 2em = 2*16=32px */
  31.             /* 但是 em在父元素中被重新定义了, 1em = 30px  */
  32.             /* 2em = 60px */
  33.             /* em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱 */
  34.             /* font-size: 20px; */
  35.             font-size: 2rem;
  36.         }
  37.     </style>
  38. </body>
  39. </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