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

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

创新互联主营弋江网站建设的网络公司,主营网站建设方案,重庆App定制开发,弋江h5小程序制作搭建,弋江网站营销推广欢迎弋江等地区企业咨询

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

标题名称：如何做出不用媒体查询的web响应式设计-创新互联
标题链接：https://www.cdcxhl.com/article44/cdoche.html

成都网站建设公司_创新互联，为您提供品牌网站设计、虚拟主机、网站维护、手机网站建设、App开发、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联