Examples of web responsive design (without media queries)-H5 Tutorial-php.cn

Examples of web responsive design (without media queries)

PHP中文网

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

Original

1468 people have browsed it

(0)Written in front
　Telling about a case in an article I saw on Zhihu, it opened my mind and admired me Extremely, I found the original text the next day and praised it for $
5 yuan. The original text address, the case uses a lot of CSS3 attributes.
(1) Effect demonstration

##(2) Knowledge points and effects

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

Copy after login

The above is a simple code

display: flex; Make the internal elements of .trunc-list become flex items

flex-wrap: wrap; When the width is not enough, the internal elements will wrap, so when the browser window is scaled to a certain width, the height of .trunc-list will

change.

The zoomed element cannot be seen because the height of .trunc-list-wrapper: 2.25em;overflow: hidden; causes the
element to be hidden.
The change in the height of trunc-list makes height: calc((2.25em - 100%) * -1000); take effect, you can see more,
max-height: 2.25em; limits the maximum height.

Click more, because

#myList is a valid stroke point, the following css takes effect

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

Copy after login

At the same time, the following css takes effect

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

Copy after login

Hidden elements can be seen

When less is clicked, because it is an invalid anchor point, it is relative to the clearing of the above effects.

4. Complete 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>

Copy after login

View Code

The above is the detailed content of Examples of web responsive design (without media queries). For more information, please follow other related articles on the PHP Chinese website!