Notes de cours du "Camp d'entraînement spécial du groupe Qiwu" (1) —— Résumé des méthodes courantes de conception adaptative

fenêtre

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

Il n'est pas recommandé de définir pour interdire la mise à l'échelle de l'utilisateur: évolutif par l'utilisateur: non

affichage de l'image

La grande image est automatiquement mise à l'échelle avec le conteneur pour conserver un rapport hauteur / largeur fixe

largeur max: 100%

Image d'arrière-plan

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

Conserver un rapport hauteur / largeur fixe

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

Après avoir défini une boîte avec un certain rapport hauteur / largeur, utilisez le positionnement absolu pour remplir le contenu du milieu.

Vous pouvez également utiliser ce conteneur pour envelopper l'image, car dans la conception réactive, la largeur de l'image n'est pas définie, puis une gigue peut se produire lorsque l'image est chargée, donc envelopper l'image avec une boîte avec un rapport hauteur / largeur fixe peut résoudre ce problème.

Disposition adaptative à deux colonnes

flotteur 与 BFC

Positionnement absolu

Table de simulation

mise en page flexible

Barre de navigation

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

Vous pouvez définir un processus de défilement lorsque l'affichage sur le téléphone n'est pas suffisant

Un ul est imbriqué dans nav, défini pour afficher: table; nav est défini sur over-flow: scroll;

Disposition en grille, habillage de ligne automatique

bloc en ligne + justifier ou flex

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

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

requête média

Utilisez différents styles pour différents écrans

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

Paramètre de police 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;
    }
  }