詳解CSS響應式

時間 2020-05-30

標籤詳解 css 響應欄目 CSS 简体版

原文原文鏈接

什麼是CSS響應式？

網頁在不一樣尺寸的設備上，都有良好的顯示效果，叫作"響應式設計"，響應式圖像的解決方案有不少，JavaScript 和 CSS 均可以實現。html

響應式實現的方案（CSS方案）

一、媒體查詢(media query)

媒體查詢就是對設備按照某些條件進行查詢，使符合查詢條件的設備顯示對應的樣式，從而達到不一樣設備顯示不一樣樣式的效果。前端

簡單demo：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>媒體查詢</title>
  <style>
    @media (max-width: 768px){ /*0~768*/
        body{
            background: red;
        }
     }  
     @media (max-width: 425px){ /*0~425*/
        body{
            background: yellow;
        }
     }  
     @media (max-width: 375px){ /*0~375*/
        body{
            background: blue;
        }
     }  
     @media (max-width: 320px){ /*0~320*/
        body{
            background: pink;
        }
     }  

     @media (min-width: 769px){ /*769~+∞*/
        body{
            background: green;
        }
     }
  </style>
</head>
<body>
</body>
</html>
複製代碼

效果圖：

二、百分比佈局

經過百分比單位 " % " 來實現響應式的效果。好比當瀏覽器的寬度或者高度發生變化時，經過百分比單位，可使得瀏覽器中的組件的寬和高隨着瀏覽器的變化而變化，從而實現響應式的效果git

簡單demo現：

// 簡單一個demo,實現一個4：3比列的長方型，不小隨窗口大小2而改變比列
<div class="trangle"></div>

.trangle{
  height:0;
  width:100%;
  padding-top:75%;  //相對寬度爲75%
}

複製代碼

其中，子元素的padding若是設置百分比，不管是垂直方向或者是水平方向，都相對於直接父親元素的width，而與父元素的height無關。github

效果圖：

三、經過rem來實現響應式佈局

REM佈局也是目前多屏幕適配的最佳方式

REM是CSS3新增的單位，而且移動端的支持度很高，rem單位都是相對於根元素html的font-size來決定大小的,根元素的font-size至關於提供了一個基準，當頁面的size發生變化時，只須要改變font-size的值，那麼以rem爲固定單位的元素的大小也會發生響應的變化web

簡單demo，利用媒體查詢，設置在不一樣設備下的字體大小。:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      /* pc width > 1100px */
      html {
        font-size: 100%;
      }
      body {
        background-color: yellow;
        font-size: 1.5rem;
      }
      /* ipad pro */
      @media screen and (max-width: 1024px) {
        body {
          background-color: #ff00ff;
          font-size: 4rem;
        }
      }
      /* ipad */
      @media screen and (max-width: 768px) {
        body {
          background-color: green;
          font-size: 3rem;
        }
      }
      /* iphone6 7 8 plus */
      @media screen and (max-width: 414px) {
        body {
          background-color: blue;
          font-size: 2rem;
        }
      }
      /* iphoneX */
      @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
        body {
          background-color: #0ff000;
          font-size: 1rem;
        }
      }
      /* iphone6 7 8 */
      @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
        body {
          background-color: #0ff000;
          font-size: .5rem;
        }
      }
      /* iphone5 */
      @media screen and (max-width: 320px) {
        body {
          background-color: #0ff000;
          font-size: 0.75rem;
        }
      }
    </style>
  </head>
  <body>
    <h1>rem佈局</h1>
  </body>
</html>

複製代碼