Notas do curso do "Campo de treinamento especial do Grupo Qiwu" (1) —— Resumo dos métodos comuns de design responsivo

janela de exibição

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

Não é recomendado definir para proibir o escalonamento do usuário: escalável pelo usuário: não

display de imagem

A imagem grande é dimensionada automaticamente com o contêiner para manter uma proporção fixa

largura máxima: 100%

Imagem de fundo

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

Manter uma proporção fixa

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

Depois de definir uma caixa com uma determinada proporção de aspecto, use o posicionamento absoluto para preencher o conteúdo do meio.

Você também pode usar este contêiner para embrulhar a imagem, porque no design responsivo, a largura da imagem não é definida, então jitter pode ocorrer quando a imagem é carregada, então embrulhar a imagem em uma caixa com uma proporção fixa pode resolver esse problema.

Layout adaptável de duas colunas

flutuar 与 BFC

Posicionamento absoluto

Mesa de simulação

layout flexível

Barra de navegação

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

Você pode definir um processo de rolagem quando a tela do telefone não for suficiente

Um ul está aninhado dentro de nav, definido para exibir: table; nav é definido como over-flow: scroll;

Layout de grade, quebra automática de linha

inline-block + justify ou flex

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

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

consulta de mídia

Use estilos diferentes para telas diferentes

<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);
   }
}

Configuração de fonte 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;
    }
  }