全域性新增zoom CSS屬性

2021-10-18 20:20:52 字數 606 閱讀 2061

背景:

本人在一次專案中 產品提的乙個需求如下:

產品覺得頁面鋪的太滿 對於1600-1200尺寸螢幕下的使用者不太友好,於是希望前端能對這類使用者做乙個縮放的處理,於是就使用了zoom:0.9對頁面進行的處理**如下:

對全域性布局新增了乙個zoom:0.9的處理

initzoomget()

else

console.

log(currentscreenwidth)

; console.

log(currentid.style.csstext)

;}

於是乎就出現了以下bug 由於是公司專案就不截圖了

一:element-ui 一切關於懸浮提示欄的元件全部位置出現偏移。

原因:zoom屬性新增到body身上:elementui元件是插在html標籤上的 所以element的元件是以html為父級做定位,而body是自身縮放 所以導致定位不正確。

解決方法:

手寫元件 二:

getboundingclientrect() 屬性的計算也出現了偏差。

解決方法:在基礎*0.8來適配;

弊端:不精確

html5 新增元素 全域性屬性

html5的優點 1 可以跨平台,不受平台的限制 2 解決了相容性的問題 3 各大知名瀏覽器都支援 xhtml和html5的區別 1 語法的改變 2 新增元素和廢除元素 3 新增屬性和廢除屬性 4 全域性屬性 語法的變化 一 1 doctype宣告 2 制定字元編碼 語法的變化 二 建議寫吧。嚴謹點...

vue新增全域性js

前言 如題 首選是自己的js檔案 export default if res return page 然後是在main.js把js物件掛載到vue裡面 ps 此處import 後面的jsutil是可以隨意取名字的 然後vue.prototype.jsutil 這個美元符號,是為了區分當前方法是使用者...

HTML 全域性屬性

屬性描述 accesskey 設定訪問元素的鍵盤快捷鍵。class 規定元素的類名 classname contenteditable new規定是否可編輯元素的內容。contextmenu new指定乙個元素的上下文選單。當使用者右擊該元素,出現上下文選單 data new用於儲存頁面的自定義資料...