Course Notes of "Qiwu Group Special Training Camp" (1)——Summary of common methods of responsive design

viewport

<meta name='viewport' content='width=device-width' initial-scale=1.0' >

It is not recommended to set to prohibit user scaling: user-scalable: no

picture display

The large image is automatically scaled with the container to maintain a fixed aspect ratio

max-width:100%

Background picture

//背景图片
background-size:cover;//用于背景图片不是很重要的场合，因为图片可能被裁剪掉
background-size:contain;//用于背景图片信息比较重要的场合，不希望图片被裁剪

Maintain a fixed aspect ratio

<div></div>
<style>
    div{
      height:0;
      padding-top:50%;     //padding设置的是相对于父元素的宽度，这样就可以保证这是一个高宽比一定的盒子
    }
</style>

After setting a box with a certain aspect ratio, use absolute positioning to fill the middle content.

You can also use this container to wrap the image, because in the responsive design, the width of the image is not set, then jitter may occur when the image is loaded, so wrapping the image with a box with a fixed aspect ratio can solve this problem.

Two-column adaptive layout

float与BFC

Absolute positioning

Simulation table

flex layout

Navigation Bar

nav{
    display:table;
}
nav a{
    display:table-cell;
}

You can set a scrolling process when the display on the phone is not enough

A ul is nested inside nav, set to display: table; nav is set to over-flow: scroll;

Grid layout, automatic line wrapping

inline-block+justify or flex

ul{
    margin:0;
    padding:0;
    text-align:justify;
}

li{
    display:inline-block;
    width:30%;  //根据网页的设计需求设定。也可能是固定宽度，能排几个排几个
    height：0；
    padding-top：20%；  //固定宽高比
}

media query

Use different styles for different screens

<link rel='stylesheet' href='m.css' media='screen and (max-width:480px)'>

@media screen and(min-width:480px) {
  .selector {...}
}

 <nav>
        <a href="#"> Home </a>
        <a href="#"> JavaScript </a>
        <a href="#"> HTML </a>
        <a href="#"> CSS </a>
        <a href="#"> HTTP </a>
    </nav>

//css

body {
    margin: 0;
}

nav {
    display: flex;
    width: 100%;
    background: #00BCD4;
}
nav a {
    flex: 1;
    text-decoration: none;
    color: #fff;
    padding: 0 1em;
    font: normal 14px/2 HElvetica, sans-serif; 
}

nav a:not(:first-child) {
    border-left: 1px solid rgba(255,255,255,.7);
}
@media screen and (max-width: 480px) {
   nav {
    flex-direction: column;
   }
   nav a:not(:first-child) {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.7);
   }
}

Font setting rem

html {
 font-size:16px;
}
h1 {
 font-size:2rem;
}
p {
font-size: 1rem;
}

@media screen and (max-width: 1000px){
  html {
   font-size: 14px;
  }
}
@media screen and (max-width: 720px) {
    html {
      font-size:12px;
    }
  }