如何做出不用媒体查询的web响应式设计

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

目前创新互联公司已为成百上千的企业提供了网站建设、域名、网站空间、网站托管、服务器托管、企业网站设计、淮南网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

(1)效果演示

如何做出不用媒体查询的web响应式设计

(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.完整的代码

响应式的另一种思考

改变视口宽度大小来观察效果

View Code

上述内容就是如何做出不用媒体查询的web响应式设计，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

网站名称：如何做出不用媒体查询的web响应式设计
标题来源：http://cdiso.cn/article/jshsop.html

如何做出不用媒体查询的web响应式设计

其他资讯