1、設計稿
1）pc設計稿為19201080的視覺化大屏，16：9比例設計
2）大屏設計稿35841152的視覺化大屏，28：9比例設計
3）移動端設計稿 寬750的視覺化大屏
2、適配不同螢幕
1）pc要相容不同解析度下的螢幕，注意這裡說的是往下相容 相容1k以下的 不能出現滾動條 使用scale
2）大屏比例為28：9，在專案開發中，可以按照1680：540 達到28:9的效果 不能出現滾動條 使用rem
3）移動端相容，以750為標準實現適配 使用rem
3、實現思路：
1）pc可以根據vw、vh去實現
"scss">
@function
vw($px)
body
// 字型轉換
function
tofontsize
(px)
rem (font size of the root element), 是 css3 的引入的乙個大小單位。即相對於根元素的 font-size 值的大小。所謂根元素在網頁裡一般就是 html。
問題：在echats中，當在小螢幕的時候，圖表的字型會比ui稿上的大，這時候你又要把字型在js裡面再進行一步轉換
3）縮放scale
瀏覽器body設定為設計稿寬高即1920*1080， 動態根據實際寬高對body的width，height進行縮放，從而實現內容縮放
採用scale方案，字型不受瀏覽器最小字型限制，可以自由綻放到該解析度下對應比例
4）根據不同螢幕切換顯示 不同頁面
pc和大屏的頁面布局結構一致，所以更換classname去實現切換
移動端與pc、大屏的頁面布局都不一致，所以根據js判斷當前是否為移動裝置進行顯示切換
4、簡單實現**
>
>
name
="viewport"
content
="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no"
>
head
>
>
class
="pc"
id="main"
>
class
="column"
>
class
="bk"
>
div>
class
="bk"
>
div>
class
="bk"
>
div>
div>
class
="column"
>
class
="big-bk"
>
div>
class
="big-bk"
>
div>
div>
class
="column"
>
class
="bk"
>
div>
class
="bk"
>
div>
class
="bk"
>
div>
div>
div>
class
="mobile"
>
class
="column"
>
class
="bk"
>
div>
class
="bk"
>
div>
class
="bk"
>
div>
class
="bk"
>
div>
div>
div>
body
>
>
var bodystyle = document.
createelement
('style'
)var docwidth,docheight;
var designwidth,designheight;
// 螢幕縮放實現
function
refreshscale()
px; height:
$px!important;}`
document.documentelement.firstelementchild.
(bodystyle)
document.
getelementbyid
('main'
).style=
'display:flex'
document.
getelementsbyclassname
('mobile')[
0].style=
'display:none'
var widthratio = docwidth / designwidth,
heightratio = docheight / designheight;
document.body.style =
`transform:scale($,
$);transform-origin:left top;`
;// 應對瀏覽器全屏切換前後視窗因短暫滾動條問題出現未佔滿情況
settimeout
(function()
,0)}
// 清除scale
function
clearscale()
// 初始化
function
init()
else
else}}
// 大屏設定 rem 函式
function
setrem
(designsize)
// 大屏頁面
function
largepage()
// 移動端頁面
function
mobilepage()
// 初始化
init()
;// 監聽前進/後退以及load事件觸發
window.
addeventlistener
("pageshow"
,function
(e)}
,false);
// 監聽螢幕縮放
window.
addeventlistener
("resize"
,function()
,false);
script
>
html
>
>
html
body
/* pc */
.pc.pc .column
.pc .bk
.bk:first-child
.pc .big-bk
.big-bk:first-child
/* 移動端 */
.mobile
.mobile .bk
/* 大屏 */
.large
.large .column
.large .bk
.large .big-bk
style
>
實用的原生js相容問題
新增事件方法 addhandler function element,type,handler else if element.attachevent else 移除之前新增的事件方法 removehandler function element,type,handler else if eleme...
原生js實現Ajax
一般來說，大家可能都會習慣用jquery提供的ajax方法，但是用原生的js怎麼去實現ajax方法呢？jquery提供的ajax方法 ajax success function error function 原生js實現ajax方法 var ajax obj.send post function u...
原生js實現Ajax
ajax success function error function 原生js實現ajax方法 var ajax xhr.send datat應為 a a1 b b1 這種字串格式，在jq裡如果data為物件會自動將物件轉成這種字串格式 post function url,data,fn xhr...