Home > Article > Web Front-end > Examples of web responsive design (without media queries)

Examples of web responsive design (without media queries)

PHP中文网Original: 2017-06-20 13:39:501481browse

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

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

At the same time, the following css takes effect

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

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to operate mobile page layoutNext article：How to operate mobile page layout

See more

Examples of web responsive design (without media queries)

Related articles