Maison > Article > interface Web > Exemples de conception Web réactive (sans requêtes multimédias)

Exemples de conception Web réactive (sans requêtes multimédias)

PHP中文网original: 2017-06-20 13:39:501481parcourir

(0)Écrit devant
　Parler d'un cas dans un article que j'ai vu sur Zhihu, cela m'a ouvert l'esprit et m'a admiré Extrêmement, j'ai trouvé le texte original le lendemain et l'a loué
5 yuans L'adresse du texte original le cas utilise beaucoup d'attributs CSS3.
(1) Démonstration des effets

(2) Points de connaissance et effets

<div class="trunc-list-wrapper" id="mylist">
        <ul class="trunc-list">
            <li>
                <a href="#">Home</a>
            </li>
         ...
        <li aria-hidden="true" class="control  control--open">
                <a href="#mylist"><span>more</span></a>
            </li>
            <li aria-hidden="true" class="control  control--close">
                <a href=""><span>less</span></a>
            </li>
        </ul>
    </div>
.trunc-list-wrapper {height: 2.25em;overflow: hidden;padding-right: 3.5em;
    }.trunc-list {  
        display: flex;flex-wrap: wrap;position: relative;
    }.trunc-list li { 
          flex: 1 0 auto;
}.control {position: absolute;top: 0;right: -3.5em;width: 3.5em;height: calc((2.25em - 100%) * -1000);max-height: 2.25em;overflow: hidden;
    }.control--close {display: none;
    }

Ce qui précède est un code simple

affichage : flex; Faire en sorte que les éléments internes de .trunc-list deviennent des éléments flexibles

flex-wrap: wrap; Lorsque la largeur n'est pas suffisante, les éléments internes seront renvoyés à la ligne, donc lorsque la fenêtre du navigateur est redimensionnée à une certaine largeur, la hauteur de .trunc-list change

.
L'élément zoomé ne peut pas être vu car la hauteur : 2.25em;overflow: Hidden; de .trunc-list-wrapper entraîne le masquage de l'élément
.
Le changement de hauteur de trunc-list fait que height: calc((2.25em - 100%) * -1000); vous pouvez en voir plus,
max-height: 2.25em limite le maximum; hauteur.

Cliquez sur plus, car
#myList est un point de trait valide, le CSS suivant prend effet

.trunc-list-wrapper:target .control--open {  display: none;
        }.trunc-list-wrapper:target .control--close {  display: block;
        }

En même temps fois, le CSS suivant prend effet

.trunc-list-wrapper:target {  height: auto;
        }

Les éléments cachés peuvent être vus

Lorsque l'on clique sur moins, c'est un point d'ancrage invalide, par rapport à l'effacement de les effets ci-dessus.

4. Code complet

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>响应式的另一种思考</title><style>/* Basic common settings: */* {  box-sizing: border-box;}html {  line-height: 1.25;  font-family: 'Lato', sans-serif;}.trunc-list-wrapper {  height: 2.25em;  overflow: hidden;  padding-right: 3.5em;}.trunc-list {  list-style: none;  display: flex;  flex-wrap: wrap;  margin: 0;  padding: 0;  position: relative;}.trunc-list li {  margin: 0;  padding: 0;  flex: 1 0 auto;}.trunc-list a {  display: block;  padding: 0.5em;  text-align: center;  white-space: nowrap;  
          color: #fff;  background:red;}.trunc-list a:hover,
        .trunc-list a:active,
        .trunc-list a:focus {   background: red; }.control {  position: absolute;  top: 0;  right: -3.5em;  width: 3.5em;  
          height: calc((2.25em - 100%) * -1000);  max-height: 2.25em;  
          overflow: hidden;}.control a {  text-decoration: none;}.control span {  font-size: 0.75em;  font-style: italic;}.control--close {  display: none;}.trunc-list-wrapper:target {  height: auto;}.trunc-list-wrapper:target .control--open {  display: none;}.trunc-list-wrapper:target .control--close {  display: block;}</style></head><body><div class="trunc-list-wrapper" id="mylist">  <ul class="trunc-list"><li>  <a href="#">Home</a></li><li>  <a href="#">Blog</a></li><li>  <a href="#">About Us</a></li><li>  <a href="#">Contact Us</a></li><li>  <a href="#">Help</a></li><li>  <a href="#">Login</a></li><li>  <a href="#">Sign In</a></li><li aria-hidden="true" class="control  control--open">  <a href="#mylist"><span>more</span></a></li><li aria-hidden="true" class="control  control--close">  <a href=""><span>less</span></a></li>  </ul></div><p>改变视口宽度大小来观察效果</p></body></html>

Voir Code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la mise en page mobileArticle suivant：Comment utiliser la mise en page mobile

Articles Liés

Voir plus