Beispiele für Web-Responsive-Design (ohne Medienabfragen)-H5-Tutorial-php.cn

Beispiele für Web-Responsive-Design (ohne Medienabfragen)

PHP中文网

Freigeben： 2017-06-20 13:39:50

Original

1499 Leute haben es durchsucht

(0)Vorn geschrieben
　In einem Artikel, den ich auf Zhihu gesehen habe, von einem Fall zu erzählen, öffnete meinen Geist und bewunderte mich extrem, fand ich Der Originaltext wurde am nächsten Tag gelesen und gelobt
5 Yuan Die ursprüngliche Textadresse verwendet viele CSS3-Attribute.
(1) Wirkungsdemonstration

(2) Wissenspunkte und Effekte

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

Nach dem Login kopieren

Das Obige ist ein einfacher Code

display: flex; Machen Sie die internen Elemente von .trunc-list zu Flex-Elementen

flex-wrap: wrap; Wenn die Breite nicht ausreicht, werden die internen Elemente umbrochen. Wenn das Browserfenster also auf eine bestimmte Breite skaliert wird, ändert sich die Höhe von .trunc-list

.
Das gezoomte Element ist nicht sichtbar, da die Höhe: 2,25em;overflow: versteckt; von .trunc-list-wrapper dazu führt, dass das Element
ausgeblendet wird.
Die Änderung der Höhe von trunc-list bewirkt, dass height: calc((2.25em - 100%) * -1000); wirksam wird, Sie können mehr sehen,
max-height: 2.25em; begrenzt das Maximum Höhe.

Klicken Sie auf mehr, da
#myList ein gültiger Strichpunkt ist, wird das folgende CSS wirksam

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

Nach dem Login kopieren

Gleichzeitig Zeit tritt das folgende CSS in Kraft

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

Nach dem Login kopieren

Versteckte Elemente sind sichtbar

Wenn weniger angeklickt wird, handelt es sich um einen ungültigen Ankerpunkt im Verhältnis zum Löschen die oben genannten Effekte.

4. Vollständiger Code

<!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>

Nach dem Login kopieren

Anzeigen Code

Das obige ist der detaillierte Inhalt vonBeispiele für Web-Responsive-Design (ohne Medienabfragen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!