思否網站隨屏幕大小自動發生變化

Nino 發布于2019-08-29 16:37 / 2860人閱讀

摘要：之后，為了弄明白到底為什么，我直接扒來了網頁的源代碼，首先，先搞明白創建按鈕變號是怎么回事。

上次匯報中，潘老師演示了一下思否網站設計的優點，其中一點就是頁面隨屏幕自動發生變化，先看幾張圖，來了解一下這神奇的功能

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

放大到165%的效果，會發現搜索框變窄了，而創建按鈕從文字變成了一個圖標

放大到195%的效果，會發現左右兩側的豎欄消失了，導航欄的通知和私信圖標和右邊的一些鏈接也不見了，而導航欄下則多了一行導航

隨即老師拋出一個問題，怎么實現的？
作為一個新人小白，對于css的使用只有入門級別，我大概知道bootstrap上的柵格可以在不同大小的屏幕自動按列排布，但隨屏幕大小圖標變換和消失就不甚知曉了。

之后，為了弄明白到底為什么，我直接扒來了網頁的源代碼，首先，先搞明白創建按鈕變+號是怎么回事。
先找“創建按鈕”，在創建按鈕下面i標簽就是放大后的+號

接著刪除除創建按鈕和i標簽以外的其他所有無關代碼

此時，按鈕在放大后依然擁有變化的功能
接著下來的過程很無腦，就是挨個刪除他們的class屬性，檢索使得按鈕能變化的功能，最后，我鎖定到了這個屬性visible（可見的）。

去網上一查，找到了答案
這個visible是bootstrap里的自動隱藏和顯示，唉，看文檔時沒仔細看，學藝不精啊，具體用法如下：

簡單來說就是根據屏幕大小自動顯示或隱藏，然后我再回首頁的源代碼搜索visible，基本變化的地方都用到了該屬性

另外，在div的class中設置多個柵格，可以在對應大小的屏幕上對應顯示

總結

從這個細節就可以看出，一個強大的網站總是能考慮到用戶的體驗，盡量做到用戶友好

GPU云服務器云服務器隨屏幕滾動 delphi指針地址發生變化 js輸入框發生變化自動快照隨磁盤釋放

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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