媒體查詢表格樣式

媒體查詢

查詢當(dāng)前屏幕的寬度變化

針對(duì) PC 不通的分辨率設(shè)置屏幕查詢

<body>
  <button class="btn small">按鈕1</button>
  <button class="btn middle">按鈕2</button>
  <button class="btn large">按鈕3</button>
  <style>
    html {
      font-size: 10px;
    }
    .btn {
      border: none;
      background: slateblue;
      color: #fff;
      outline: none;
      border-radius: 3px;
    }
    .btn:hover {
      cursor: pointer;
      opacity: 0.8;
      transform: scale(1.05, 1.1);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 0.4rem 0.8rem;
    }
    .btn.small {
      font-size: 1.2rem;
    }
    .btn.middle {
      font-size: 1.6rem;
    }
    .btn.large {
      font-size: 1.8rem;
    }
    @media (max-width: 1024px) {
      html {
        font-size: 12px;
      }
    }
    @media (min-width: 1025px) and (max-width: 1440px) {
      html {
        font-size: 14px;
      }
    }
    @media (min-width: 1441px) and (max-width: 1920px) {
      html {
        font-size: 16px;
      }
    }
    @media (min-width: 1921px) {
      html {
        font-size: 18px;
      }
    }
  </style>
</body>

根據(jù)市面上的 PC 屏分為 1024,1440,1920 查詢屏幕寬度

@media (max-width: 1024px) { html { font-size: 12px; }
小于 1024(包括 1024)的屏幕 html 的 font-size 設(shè)為 12px;
@media (min-width: 1025px) and (max-width: 1440px) { html { font-size: 14px; } }
1024 到 1440 的屏幕 html 的 font-size 設(shè)為 14px;
@media (min-width: 1441px) and (max-width: 1920px) { html { font-size: 16px; } }
1441 到 1920 的屏幕 html 的 font-size 設(shè)為 16px;
@media (min-width: 1921px) { html { font-size: 18px; } }
大于 1921 的屏幕 html 的 font-size 設(shè)為 18px;

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：作業(yè)盡量寫在一起

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

初學(xué) emmet 生成標(biāo)簽

2021-12-22 18:00:17

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

媒體查詢表格樣式

媒體查詢

查詢當(dāng)前屏幕的寬度變化