做web响应式设计（不用媒体查询）实例
(0)写在前面
讲述知乎上看到的一篇文章中的一个案例，让我脑洞大开，佩服至极，特意第二天找到原文赞赏了
5元，原文地址，案例用了很多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>
以上是做web响应式设计（不用媒体查询）实例的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
12306怎么查询历史购票记录 查看历史购票记录的方法
Mar 28, 2024 pm 03:11 PM
12306订票app下载最新版是一款大家非常满意的出行购票软件，想去哪里就去那里非常方便，软件内提供的票源非常多，只需要通过实名认证就能在线购票，所有用户的出行车票机票都可以轻松买到，享受不同的优惠折扣。还能提前开启预约抢票，预约酒店、专车接送都是可以的，有了它想去哪里就去那里一键购票，出行更加简单方便，让大家的出行体验更舒服，现在小编在线详细为12306用户们带来查看历史购票记录的方法。 1.打开铁路12306，点击右下角我的，点击我的订单 2.在订单页面点击已支付。 3.在已支付页
首发899元 中兴5G随身Wi-Fi U50S开售：最高网速500Mbps
Apr 26, 2024 pm 03:46 PM
4月26日消息，中兴5G随身Wi-FiU50S目前已经正式开售，首发899元。外观设计上，中兴U50S随身Wi-Fi简约时尚，易于手持和包装。其尺寸为159/73/18mm，携带方便，让您随时随地畅享5G高速网络，实现畅行无阻的移动办公与娱乐体验。中兴5G随身Wi-FiU50S该设备支持先进的Wi-Fi6协议，峰值速率高达1800Mbps，依托骁龙X55高性能5G平台，为用户提供极速的网络体验。不仅支持5G双模SA+NSA网络环境和Sub-6GHz频段，实测网速更可达惊人的500Mbps，轻松满
学信网如何查询自己的学历
Mar 28, 2024 pm 04:31 PM
学信网如何查询自己的学历？在学信网中是可以查询到自己的学历，很多用户都不知道如何在学信网中查询到自己的学历，接下来就是小编为用户带来的学信网查询自己学历方法图文教程，感兴趣的用户快来一起看看吧！学信网使用教程学信网如何查询自己的学历一、学信网入口：https://www.chsi.com.cn/二、网站查询：第一步：点击上方学信网地址，进入首页点击【学历查询】；第二步：在最新的网页中点击如下图箭头所示的【查询】；第三步：之后在新页面点击【的登陆学信档案】；第四步：在登陆页面输入信息点击【登陆】；
复古潮流！HMD与喜力联合推出翻盖手机：透明外壳设计
Apr 17, 2024 pm 06:50 PM
4月17日消息，HMD携手知名啤酒品牌喜力以及创意公司Bodega，联袂推出了一款别具一格的翻盖手机——无聊手机（TheBoringPhone）。这款手机不仅在设计上充满新意，更在功能上返璞归真，旨在引领人们回归真实的人际交往，享受与朋友畅饮的纯粹时光。无聊手机采用了独特的透明翻盖设计，展现出一种简约而不失优雅的美感。其内部配备了2.8英寸QVGA显示屏，外部则是一块1.77英寸的显示屏，为用户提供了基本的视觉交互体验。在摄影方面，虽然仅搭载了30万像素的摄像头，但足以应对日常的简
荣耀Magic V3首发AI离焦护眼技术：有效缓解近视发展
Jul 18, 2024 am 09:27 AM
7月12日消息，荣耀MagicV3系列今日正式发布，搭载全新荣耀视力舒缓绿洲护眼屏，在屏幕本身具备高规格和高素质的同时，还开创性的引入AI主动式护眼技术。据悉，传统的缓解近视的方式是“近视镜”，近视眼镜度数均匀分布，保证了视线中心区域成像在视网膜之上，但周边区域成像在视网膜后，视网膜感应到成像在后，促进眼轴向后生长，从而使度数加深。目前主要的缓解近视发展的方式之一是“离焦镜”，其中心区域度数正常，周边区域通过光学设计分区调整，从而使周边区域成像落在视网膜前，
台电M50 Mini小平板来了：8.7寸IPS屏、5000mAh电池
Apr 04, 2024 am 08:31 AM
4月3日消息，台电即将推出的M50Mini平板电脑是一款功能丰富、性能强大的设备。这款8英寸小平板新品搭载了8.7英寸的IPS屏幕，为用户提供了出色的视觉体验。其金属机身设计不仅美观，还增强了设备的耐用性。在性能方面，M50Mini搭载了紫光展锐T606八核处理器，拥有两个A75核心和六个A55核心，确保了流畅且高效的运行体验。同时，该平板还配备了6GB+128GB的存储方案，并支持8GB内存扩展，满足了用户对于存储和多任务处理的需求。在续航上，M50Mini配备了5000mAh的电池，支持Ty
ppt结束页如何设计才足够吸引人
Mar 20, 2024 pm 12:30 PM
在工作中，ppt是职场人士常常使用的办公软件。一个完整的ppt必须有一个好的结束页。不同的职业要求赋予不同的ppt制作特点。关于结束页的制作，如何才能设计的比较吸引人呢？下边我们一起看一看，如何设计ppt结束页吧！ppt结束页的设计可以在文字和动画方面进行一些调整，根据需要选择简洁或炫目的风格。接下来，我们将重点关注如何通过创新的表达方式来打造出符合要求的ppt结束页。那我们开始今天的教程吧。1、对于结束页的制作上，使用图片中的任何文字都可以，结束页重要的是表示我的演示结束了。2、除了这些文字，
vivo信号最强手机！vivo X100s搭载寰宇信号放大系统：21天线、360°环绕设计
Jun 03, 2024 pm 08:41 PM
5月13日消息，vivoX100s今晚正式发布，除了出色的影像，新机在信号方面表现也十分强悍。据vivo官方介绍，vivoX100s采用了创新的寰宇信号放大系统，该系统配备了高达21根天线。这一设计基于直屏进行了重新优化，以平衡5G、4G、Wi-Fi、GPS以及NFC等众多信号需求。这使得vivoX100s成为了vivo有史以来信号接收能力最强的手机。新款手机还采用了独特的360°环绕设计，天线分布在机身周围。这一设计不仅增强了信号的强度，还针对日常各种握持姿势进行了优化，避免了因握持方式不当导
