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

(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>
        <ul>
            <li>
                <a>Home</a>
            </li>
         ...
        <li>
                <a><span>more</span></a>
            </li>
            <li>
                <a><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

nbsp;html><meta><title>响应式的另一种思考</title><style>/* Basic common settings: */* {  box-sizing: border-box;}html {  line-height: 1.25;  font-family: &#39;Lato&#39;, 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><div>  <ul>
<li>  <a>Home</a>
</li>
<li>  <a>Blog</a>
</li>
<li>  <a>About Us</a>
</li>
<li>  <a>Contact Us</a>
</li>
<li>  <a>Help</a>
</li>
<li>  <a>Login</a>
</li>
<li>  <a>Sign In</a>
</li>
<li>  <a><span>more</span></a>
</li>
<li>  <a><span>less</span></a>
</li>  </ul>
</div><p>改变视口宽度大小来观察效果</p>

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!