详解CSS响应式

什么是CSS响应式？

网页在不同尺寸的设备上，都有良好的显示效果，叫做"响应式设计"，响应式图像的解决方案有很多，JavaScript 和 CSS 都可以实现。

响应式实现的方案（CSS方案）

1、媒体查询(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>

效果图：

2、百分比布局

通过百分比单位 " % " 来实现响应式的效果。比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果

简单demo现：

// 简单一个demo,实现一个4：3比列的长方型，不小随窗口大小2而改变比列
<div class="trangle"></div>

.trangle{
  height:0;
  width:100%;
  padding-top:75%;  //相对宽度为75%
}

其中，子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

效果图：

3、通过rem来实现响应式布局

REM布局也是目前多屏幕适配的最佳方式

REM是CSS3新增的单位，并且移动端的支持度很高，rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化

简单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>