详解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>

复制代码