(0)写在前面
　　讲述知乎上看到的一篇文章中的一个案例，让我脑洞大开，佩服至极，特意第二天找到原文赞赏了

5元，原文地址https://zhuanlan.zhihu.com/p/27258076，案例用了很多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:;

        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>

不用媒体查询做web响应式设计-遁地龙卷风的更多相关文章

  1. 【media-queries】媒体查询，为了响应式设计而生

    目录 简介 语法 常用尺寸 一 简介 针对现在纷杂的设备,css3中加入,可以查询你的浏览类型(screen彩色屏幕, print, all)和css属性判断. 最常用的就是查询屏幕大小,给予适合的展 ...

  2. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  3. 移动WEB 响应式设计 @media总结

    第一种: 在引用样式的时候添加 <link rel="stylesheet" media="mediatype and|not|only (media featur ...

  4. 响应式设计的思考:媒体查询(media query)

    Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...

  5. 通过媒体查询来实现 WPF 响应式设计

    WPF 客户端经常需要运行在各种不同大小屏幕下,为了显示友好,所以开发的时候都需要考虑响应式设计. 布局往往通过指定比例,而不直接指定准确的大小来实现响应式布局(如 Width="3*&qu ...

  6. web响应式图片设计实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  7. web设计经验<一> 提升移动设备响应式设计的8个建议

    今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...

  8. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  9. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

随机推荐

  1. xmlplus 组件设计系列之四 - 列表

    列表组件是极其常用的一类组件,是许多视图组件系统的必须包含的.列表可以做的很简单,只显示简洁的内容.列表也可以做的很复杂,用于展示非常丰富的内容. 组成元素 列表离不开列表项以及包含列表项的容器.下面 ...

  2. CodeSmith生成实体的分页读取规则

    首先.我得向咱们博客园提个意见,能不能我写的东西就给预保存下呢?刚才我写半天,只因为这个不给力的IE浏览器死了,导致我白写了,如果这要是那个大神直接在这上面写的非常有技术含量的贴着会因此而丢失实在是有 ...

  3. Less与Sass

    less 1.变量    声明变量:@变量名:变量值 使用变量:@变量名 >>>Less中变量的类型 ①数字类:1 100px ②字符串:无引号字符串[red] 有引号字符串[&qu ...

  4. BFC块级格式上下文

    BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...

  5. OC中的copy

    copy的概念 Copy的字面意思是"复制"."拷贝",是一个产生副本的过程 对象拷贝的目的:要使用某个对象的数据,但是在修改对象的时候不影响原来的对象内容,常 ...

  6. 利用PHPExcel读取Excel的数据和导出数据到Excel

    PHPExcel是一个PHP类库,用来帮助我们简单.高效实现从Excel读取Excel的数据和导出数据到Excel.也是我们日常开发中,经常会遇到的使用场景.比如有个客户信息表,要批量导出发给同事,我 ...

  7. 区别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...

  8. composer安装及使用说明和相关原理文档

    一.安装composer: 1.官方安装方法见https://getcomposer.org/download/   2.本人安装方法: ①先配好yum源(不会配置的见博客如何制作自己的yum源),我 ...

  9. 又是一个MVP+RxJava+Retrofit的干货集中营

    欢迎访问我的个人博客 ,未经允许不得转发 前言 今天想要与大家一起分享的是近一个星期内开发的一个新app--干货集中营客户端,其实网上已经有许多类似的项目,代码家也在他的干货集中营中推荐了几款优秀的作 ...

  10. C#单元测试，带你入门

    注:本文示例环境 VS2017 XUnit 2.2.0 单元测试框架 xunit.runner.visualstudio 2.2.0 测试运行工具 Moq 4.7.10 模拟框架 为什么要编写单元测试 ...