Examples of web responsive design (without media queries)

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

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

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>

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!