首頁 > 文章 > web前端 > 做web響應式設計（不用媒體查詢）實例

做web響應式設計（不用媒體查詢）實例

PHP中文网原創: 2017-06-20 13:39:501434瀏覽

(0)寫在前面
　　講述知乎上看到的一篇文章中的一個案例，讓我腦洞大開，佩服至極，特意第二天找到原文讚賞了
5元，原文地址，案例用了很多css3的屬性。
(1)效果示範

#(2)知識點及效果

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

上述為簡易程式碼

display: flex;使.trunc-list內部元素成為flex專案

flex-wrap: wrap;寬度不夠時內部元素會換行，所以瀏覽器視窗縮放到一定寬度時，.trunc-list的高度會發生

變化。
看不見縮放的元素是因為.trunc-list-wrapper的 height: 2.25em;overflow: hidden;導致
元素被隱藏。
trunc-list高度改變使得 height: calc((2.25em - 100%) * -1000);產生作用，可以看見more了，
max-height: 2.25em;限制了最大高度。

點擊more，因為
#myList是有效描點，下面的css生效

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

同時下面的css生效

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

隱藏的元素可以看見了

點擊less時，因為是無效的錨點，相對於對上述效果的清除。

4.完整的程式碼

<!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

以上是做web響應式設計（不用媒體查詢）實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：行動端頁面佈局應該如何操作下一篇：行動端頁面佈局應該如何操作

看更多