响应式页面实现的几种方式

Responsive Desive

viewport
Media Queries
Flexbox
Grids

Viewport

<meta name="viewport" content="width=device-width,initial-scale = 1.0"

Media Query

    @media (min-width:600px) {
      body {
        background-color: bisque;
      }
    }

    @media (max-width:599px) {
      body {
        background-color: brown;

      }

      h1 {
        text-align: center;
      }
    }

Flexbox

<style>
    #container {
      display: flex;
      margin: auto;
    }

    #container>div {
      background-color: springgreen;
      width: 200px;
      padding: 10px;
      margin: 10px;
      font-size: 20px;
    }
  </style>

Library -bootstrap

目前使用的三种方式：
1.一行就12等份，通过设置每一列的份额来划分，但这种情况下是随屏幕大小变化等比例变化的
 <div class="row">
      <div class="col-6">第一列</div>
      <div class="col-6">第二列</div>
    </div>

2.在此基础上，可以设置不同列的比例，实现宽度的不相同
 <div class="row">
      <div class="col-3">This is a example</div>
      <div class="col-3">bootstrap一行一共有12列的份额</div>
      <div class="col-6">等分份额之后，就可以响应式变化了或者通过设定屏幕大小实现变化</div>

    </div>

 3.通过设置不同的屏幕下，分列的方式，实现真正的响应式，随着屏幕变化，发生变化

     <div class="row">

      <div class="col-lg-3 col-sm-6"> 第一行：第1列</div>
      <div class="col-lg-3 col-sm-6"> 第一行：第2列</div>

      <div class="col-lg-3 col-sm-6"> 第一行：第3列</div>
      <div class="col-lg-3 col-sm-6"> 第一行：第4列</div>

    </div>

QiYongchuan / MyGitBlog

响应式页面实现的几种方式 #75

Responsive Desive