不用媒体查询做web响应式设计-遁地龙卷风

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

<!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>

View Code

不用媒体查询做web响应式设计-遁地龙卷风相关推荐

css3媒体查询实现网站响应式布局
响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词. 因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给 ...
响应式设计视口 viewport 媒体查询
响应式网页设计能让手机.平板电脑等均能获得完美的浏览体验,能够兼顾多屏幕.多场景的灵活设计,这与一次编写,到处运行有异曲同工的作用. 移动端设备的使用率虽然越来越高,但是计算机端用户也还有不少,基于这 ...
媒体查询响应式设计
一.媒体查询 <1>作用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@m ...
8、什么是响应式设计？响应式设计的基本原理是什么？如何做？
简介我这么理解:响应式布局就是一个网站能够兼容多个设备,可以根据屏幕的大小自动调整页面的展示方式以及布局,我们不用为每一个设备做一个特定的版本.响应式网站的特点: 同时适配PC+平板+手机等网站的 ...
《响应式Web设计性能优化》一1.1　响应式设计存在的问题
本节书摘来异步社区<响应式Web设计性能优化>一书中的第2章,第2.1节,作者: [美]Tom Barker 译者: 余绍亮 , 丁一 , 叶磊责编: 赵轩,更多章节内容可以访问云栖社区 ...
web设计经验一提升移动设备响应式设计的8个建议
今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议一.直观性和易用性在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...
flex如何做响应式设计_响应式设计-您做错了！
flex如何做响应式设计 Responsive design is not just about the web that automatically adjusts to different scr ...
web响应式图片设计实现
随着移动开发热潮的兴起,已经有越来越多的公司将移动端的开发列为核心,其中不论是webapp还是手机页面都是如此,在开发的过程中就涉及到了一个web响应式图片的问题,这里我们就来探讨一下响应式图片的实现 ...
14.什么是响应式设计？响应式设计的基本原理是什么？如何做？
一.是什么响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整描述 ...
什么是响应式设计？响应式设计的基本原理是什么？如何做
是什么响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整描述响应 ...

不用媒体查询做web响应式设计-遁地龙卷风

不用媒体查询做web响应式设计-遁地龙卷风相关推荐

最新文章

热门文章