如何做出不用媒体查询的web响应式设计-创新互联

本篇文章为大家展示了如何做出不用媒体查询的web响应式设计，代码简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

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