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

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

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

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

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

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

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

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

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

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

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

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

<div class="col-sm-4 col-md-3 col-lg-3 text-right">

总结

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

思否网站随屏幕大小自动发生变化相关推荐

css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: 1 2 3 4 5 6 7 8 9 10 <style> html,body{margin:0px;padding:0px;} #backgrou ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
html 网页背景图片根据屏幕大小CSS自动缩放
腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码实现的.先不说要调用jq库拖慢了网页的打开时间,而且对于兼用性不好. 前几天用CSS研究出相同效果的样式代码 ...
Android官方提供的支持不同屏幕大小的全部方法
2019独角兽企业重金招聘Python工程师标准>>> 本文将告诉你如何让你的应用程序支持各种不同屏幕大小,主要通过以下几种办法: 让你的布局能充分的自适应屏幕根据屏幕的配置来加载 ...
渐变色 + 屏幕缩小自动产生滚动条
渐变色代码 .gradien{background: -moz-linear-gradient(top, #f3f3f3 0%, #fff 100%); background: -webkit-gra ...
HTML5----响应式（自适应）网页设计（自动适应屏幕大小）
HTML5----响应式(自适应)网页设计(自动适应屏幕大小) 现在,很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机,电脑等设备,那么就需要我们在页面上下功夫,但移动端的布局不同于pc ...
html网页大小自动调整大小,根据电脑屏幕分辩率大小自动调整网页宽度
目前,电脑显示器主要为液晶显示器,它们的屏幕大小参差不齐,分辨率自然也大小不一,从面导致同一大小的网页在不同分辨率的电脑显示千差万别,可能有的显示正常,有的显示乱.这就要求在设计网页时处理好这个问题, ...
html页面一个屏幕大小不一样,关于web页自动适配屏幕大小
一.先了解下html5的viewport使用随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的 ...
echarts自动适应屏幕大小
echarts自动适应屏幕大小或者页面大小改变时刷新整个页面也可以 // 加上这一句即可 window.onresize = myChart.resize; window.addEventListe ...

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

总结

思否网站随屏幕大小自动发生变化相关推荐

最新文章

热门文章