做web相应式设计（不消媒体查询）实例-

?(0)写在前面讲述知乎上看到的一篇文章中的一个案例，让我脑洞大开，信服至极，特地第二天寻到原文赞赏了5元，原文地址https:zhuanlan.zhihu.comp27258076，案例用了许多css3的属性。(1)结果演示(2)见识点及结果<divclass"trunc-list-wrapper"id"mylist">< (0)写在前面
　　讲述知乎上看到的一篇文章中的一个案例，让我脑洞大开，信服至极，特地第二天寻到原文赞赏了
5元，原文地址，案例用了许多css3的属性。
(1)结果演示

(2)见识点及结果

        

            

                Home
            
         ...
        

                more
            
            

                less
            
        
    
.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.完备的代码

  
  Home
  Blog
  About Us
  Contact Us
  Help
  Login
  Sign In
  more
  less
  
转变视口宽度大小来调查结果

View Code

以上就是做web相应式设计（不消媒体查询）实例的细致内容，更多请关注 百分百源码网 其它相干文章！