Heim > Artikel > Web-Frontend > Beispiele für Web-Responsive-Design (ohne Medienabfragen)

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

PHP中文网Original: 2017-06-20 13:39:501436Durchsuche

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

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

Gleichzeitig Zeit tritt das folgende CSS in Kraft

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

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So bedienen Sie das mobile SeitenlayoutNächster Artikel：So bedienen Sie das mobile Seitenlayout

In Verbindung stehende Artikel

Mehr sehen