做web响应式设计(不用媒体查询)实例


本文摘自PHP中文网,作者PHP中文网,侵删。

(0)写在前面
  讲述知乎上看到的一篇文章中的一个案例,让我脑洞大开,佩服至极,特意第二天找到原文赞赏了
5元,原文地址,案例用了很多css3的属性。
(1)效果演示



(2)知识点及效果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<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生效

1

2

3

.trunc-list-wrapper:target .control--open {  display: none;

        }.trunc-list-wrapper:target .control--close {  display: block;

        }

同时下面的css生效

1

2

.trunc-list-wrapper:target {  height: auto;

        }

隐藏的元素可以看见了

点击less时,因为是无效的锚点,相对于对上述效果的清除。


4.完整的代码

1

2

3

4

5

6

<!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响应式设计(不用媒体查询)实例的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Web服务器是什么意思

Web的接口管理工具

Web学习之怎么使用纹理贴图

html5Web本地存储实例详细说明

什么是ui和Web前端?ui和Web前端的区别是什么

cs结构指的是什么

Web是网页吗

Websocket的使用详解

怎样做出h5响应式网页设计

Web响应式设计(不用媒体查询)实例

更多相关阅读请进入《Web》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...