前端視覺化頁面自適應

2021-09-29 18:26:18 字數 1387 閱讀 1147

整體布局:flex+百分比,從內到外都用百分比

css最小寬高設定:min-width、min-height,在頁面過小時增加滾動條

box-sizing: border-box

css字型設定:rem

margin/padding : vh、vw

echarts圖表字型:自定義乙個fontsize(num)函式,在大屏調好合適的數,在option配置引數時使用fontsize(num)

export

const

fontsize

=function

(num)

import

from

'@/util/util.js'

let option =

,...

...}

監測頁面變化:mounted掛載window.onresize方法

mounted()

)this

.init()

},

mounted()

)();

};}

bootstrap框架

width/height: 瀏覽器寬高

max-width: 表示小於最大寬度時生效

min-width: 表示大於最小寬度時生效

device-width/device-height: 裝置螢幕解析度寬高

resolution: 裝置解析度

orientation:portrait(縱向),高度大於等於寬度時,landscape(橫向),高度小於寬度時

/*當瀏覽器寬度大於等於700px且為橫向時css**生效*/

@media

(min-width:

700px)

and(orientation: landscape)

/*當瀏覽器寬度小於等於500px或者手持裝置且為橫向時生效*/

@media

(max-width:

500px)

, handheld and

(orientation: landscape)

/*link 引入方式*/

"stylesheet" type=

"text/css" href=

"styleb.css" media=

"screen and (min-width: 600px) and (max-width: 800px)"

>

/*@media匯入*/

@media screen and

(max-width:

990px)

}

視覺化前端測試

相信進行過前端開發的同學都知道,前端測試不僅僅涉及到功能的測試,而且也需要考慮到介面樣式測試 多瀏覽器相容性測試 效能測試。本文主要討論分析目前前端測試的現狀,並討論目前流行的測試工具,下篇文章將會介紹工具的使用方法 前端測試主要分三大方向測試,而這三大方向也分很多小方向測試,首先簡單的介紹每個方向...

Hbase視覺化操作頁面

問題是前端如何把乙個可變的量傳給後台來接收並且判斷 下面是我寫的 有大佬可以解決這個問題嗎 hbase 建立表 表名 列族版本號 列族版本號 string tablename request.getparameter tablename string columnname request.getpa...

頁面自適應

原文 首先,在網頁 的頭部,加入一行viewport元標籤。viewport是網頁預設的寬度和高度,上面這行 的意思是 網頁寬度預設等於螢幕寬度 width device width 原始縮 放比例 initial scale 1 為1.0 即網頁初始大小佔螢幕面積的100 由於網頁會根據螢幕寬度調...