重新學習前端知識時，製作了乙個統計頁面demo。由於很久沒有更新內容，所以將這次案例用到的內容整理了一下。
檢視案例
仿照vue-element-admin的樣式，進行柵格系統分布。可以根據螢幕的大小自適應。
檢視柵格系統案例
/******row 柵格系統******/
.dashboard *
.panel-row:before,
.panel-row:after
[class *= 'col-']
.col-1
.col-2
.col-3
.col-4
.col-5
.col-6
@media all and (max-width: 1000px)
.col-md-2
.col-md-3
.col-md-4
.col-md-5
.col-md-6
}@media all and (max-width: 608px)
.col-sm-2
.col-sm-3
.col-sm-4
.col-sm-5
.col-sm-6
}/***** row 柵格系統 *****/
@media only screen and ( max-width: 980px ){}
當頁面小於960px時候執行其中的語句
@media only screen and ( min-width: 980px ){}
當頁面大於980px時候執行其中的語句
@media screen and (min-width:960px) and (max-width:1200px){}
當頁面寬度大於960px小於1200px時候執行其中的語句
或者引用官網外部css、js鏈結，然後copy demo
限制柱狀圖的寬度：
barmaxwidth：30//設定柱狀最大的寬度設定圖表響應式(單個)
在配置項最後加上語句
window.onresize = mychart.resize;
在配置項最後加上下面語句
window.addeventlistener(「resize」, function () );
柵格化設計
柵格設計系統，是一種螢幕設計的方法與風格，運用固定的格仔設計版面布局，其風格工整簡潔。網頁柵格系統從平面柵格系統中發展而來，對於網頁設計而言，柵格系統的應用，不僅可以讓網頁的資訊呈現更加美觀易讀，更具可用性。下面我們看乙個例項 其html如下 其css樣式如下 在此例項中，dom元素類名形如col ...
網頁的柵格設計思考
網頁設計中的髒 亂 差，是我們在設計過程中常會遇到的問題。通常 髒 是由對色彩使用不當所產生的，而色彩使用不當產生的不好效果也分為 花 灰 花哨 灰頭土臉也就是這裡所說的 髒 我已經在早前的一些文章中談過我對設計中運用色彩的看法。有興趣的朋友可以查閱一下 色彩解釋 而 差 基本上是由於我們的技法上不...
網頁的柵格系統設計
2008年09月17日 設計 柵格系統的形成 1692年，新登基的法國國王路易十四感到法國的印刷水平強差人意，因此命令成立乙個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的 合理的，重視功能性的新字型。委員會由數學家尼古拉斯加宗 nicolas jaugeon 擔任領導，他們以羅馬體為基礎，...