简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > List of blog posts > 根据市面上的 PC 屏 分为 1024,1440,1920 查询屏幕宽度
Blogger Information
Blog 13
fans 0
comment 0
visits 8905
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
根据市面上的 PC 屏 分为 1024,1440,1920 查询屏幕宽度
ianren
Original
747 people have browsed it

媒体查询表格样式

媒体查询

查询当前屏幕的宽度变化

  • 针对 PC 不通的分辨率设置屏幕查询
  1. <body>
  2.   <button class="btn small">按钮1</button>
  3.   <button class="btn middle">按钮2</button>
  4.   <button class="btn large">按钮3</button>
  5.   <style>
  6.     html {
  7.       font-size: 10px;
  8.     }
  9.     .btn {
  10.       border: none;
  11.       background: slateblue;
  12.       color: #fff;
  13.       outline: none;
  14.       border-radius: 3px;
  15.     }
  16.     .btn:hover {
  17.       cursor: pointer;
  18.       opacity: 0.8;
  19.       transform: scale(1.05, 1.1);
  20.       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  21.       padding: 0.4rem 0.8rem;
  22.     }
  23.     .btn.small {
  24.       font-size: 1.2rem;
  25.     }
  26.     .btn.middle {
  27.       font-size: 1.6rem;
  28.     }
  29.     .btn.large {
  30.       font-size: 1.8rem;
  31.     }
  32.     @media (max-width: 1024px) {
  33.       html {
  34.         font-size: 12px;
  35.       }
  36.     }
  37.     @media (min-width: 1025px) and (max-width: 1440px) {
  38.       html {
  39.         font-size: 14px;
  40.       }
  41.     }
  42.     @media (min-width: 1441px) and (max-width: 1920px) {
  43.       html {
  44.         font-size: 16px;
  45.       }
  46.     }
  47.     @media (min-width: 1921px) {
  48.       html {
  49.         font-size: 18px;
  50.       }
  51.     }
  52.   </style>
  53. </body>
  • 根据市面上的 PC 屏 分为 1024,1440,1920 查询屏幕宽度
  1. @media (max-width: 1024px) { html { font-size: 12px; }
    小于 1024(包括 1024)的屏幕 html 的 font-size 设为 12px;
  2. @media (min-width: 1025px) and (max-width: 1440px) { html { font-size: 14px; } }
    1024 到 1440 的屏幕 html 的 font-size 设为 14px;
  3. @media (min-width: 1441px) and (max-width: 1920px) { html { font-size: 16px; } }
    1441 到 1920 的屏幕 html 的 font-size 设为 16px;
  4. @media (min-width: 1921px) { html { font-size: 18px; } }
    大于 1921 的屏幕 html 的 font-size 设为 18px;
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：作业尽量写在一起
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

  • Back top