思否网站随屏幕大小自动发生变化

Nino 发布于2019-08-29 16:37 / 2701人阅读

摘要：之后，为了弄明白到底为什么，我直接扒来了网页的源代码，首先，先搞明白创建按钮变号是怎么回事。

上次汇报中，潘老师演示了一下思否网站设计的优点，其中一点就是页面随屏幕自动发生变化，先看几张图，来了解一下这神奇的功能

首先，这是正常宽屏（1920*1080）下的效果

放大到165%的效果，会发现搜索框变窄了，而创建按钮从文字变成了一个图标

放大到195%的效果，会发现左右两侧的竖栏消失了，导航栏的通知和私信图标和右边的一些链接也不见了，而导航栏下则多了一行导航

随即老师抛出一个问题，怎么实现的？
作为一个新人小白，对于css的使用只有入门级别，我大概知道bootstrap上的栅格可以在不同大小的屏幕自动按列排布，但随屏幕大小图标变换和消失就不甚知晓了。

之后，为了弄明白到底为什么，我直接扒来了网页的源代码，首先，先搞明白创建按钮变+号是怎么回事。
先找“创建按钮”，在创建按钮下面i标签就是放大后的+号

接着删除除创建按钮和i标签以外的其他所有无关代码

此时，按钮在放大后依然拥有变化的功能
接着下来的过程很无脑，就是挨个删除他们的class属性，检索使得按钮能变化的功能，最后，我锁定到了这个属性visible（可见的）。

去网上一查，找到了答案
这个visible是bootstrap里的自动隐藏和显示，唉，看文档时没仔细看，学艺不精啊，具体用法如下：

简单来说就是根据屏幕大小自动显示或隐藏，然后我再回首页的源代码搜索visible，基本变化的地方都用到了该属性

另外，在div的class中设置多个栅格，可以在对应大小的屏幕上对应显示

总结

从这个细节就可以看出，一个强大的网站总是能考虑到用户的体验，尽量做到用户友好

超融合服务器 idc机房托管随屏幕滚动 delphi指针地址发生变化 js输入框发生变化自动快照随磁盘释放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113861.html

前端分享

摘要：根据网页主要有三部分组成结构表现和行为。要想制作符合标准的页面，一个必不可少的关键组成部分就是声明。行内元素行内元素又称内联元素。当前，大部分门户网站大部分企业的宣传站点都采用了这种布局方式。 1 前言 1-1 W3C标准 W3C标准，既一系列标准的集合，他的本质是结构标准语言。就像平时使用的HTML,CSS等都要遵守这些标准。我们这里只讨论W3C网页标准。根据网页主要有三...

Eidesen 2019-08-29 16:54 评论0 收藏0
前端分享

摘要：根据网页主要有三部分组成结构表现和行为。要想制作符合标准的页面，一个必不可少的关键组成部分就是声明。行内元素行内元素又称内联元素。当前，大部分门户网站大部分企业的宣传站点都采用了这种布局方式。 1 前言 1-1 W3C标准 W3C标准，既一系列标准的集合，他的本质是结构标准语言。就像平时使用的HTML,CSS等都要遵守这些标准。我们这里只讨论W3C网页标准。根据网页主要有三...

anquan 2019-08-02 11:40 评论0 收藏0
前端分享

摘要：根据网页主要有三部分组成结构表现和行为。要想制作符合标准的页面，一个必不可少的关键组成部分就是声明。行内元素行内元素又称内联元素。当前，大部分门户网站大部分企业的宣传站点都采用了这种布局方式。 1 前言 1-1 W3C标准 W3C标准，既一系列标准的集合，他的本质是结构标准语言。就像平时使用的HTML,CSS等都要遵守这些标准。我们这里只讨论W3C网页标准。根据网页主要有三...

liuyix 2019-08-23 12:15 评论0 收藏0
Web网页布局的主要方式

摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

blastz 2019-08-30 13:50 评论0 收藏0
Web网页布局的主要方式

摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

shiina 2019-08-01 17:52 评论0 收藏0