Web responsive design without media queries-geographic and web tornado

Web responsive design without media queries-geographic and web tornado

 

(0) Preface
The story of an article I saw in zhihu made my mind wide open and admired. I found the original article the next day and appreciated it.
5 yuan, original address: https://zhuanlan.zhihu.com/p/27258076. Many css3's cases are used.
(1) effect demonstration

(2) knowledge points and results

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

 

The above is simple code

Display: flex; make the. trunc-list internal element a flex Project

Flex-wrap: wrap; when the width is unchanged, the internal elements will wrap the line. Therefore, when the browser window is scaled to a certain width, the height of. trunc-list occurs.

Change.
The zoom element is invisible because. trunc-list-wrapper's height: 2.25em; overflow: hidden; causes
The element is hidden.
The height of the trunc-list changes so that the height: calc (2.25em-100%) *-1000); has a function. You can see more,
Max-height: 2.25em; limits the maximum height.

Click more because
# MyList is a valid description, and the following css takes effect.

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

 

At the same time, the following css takes effect

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

You can see the hidden elements.

When you click less, because it is an invalid anchor, it is relative to clearing the above effect.

4. complete code

<! DOCTYPE html> View Code