大屏自適應頁面開發分享
說到大屏頁面可能大家內心會感覺到一丟丟的發抖，因為感覺字型及布局控制實在是太困難了，哈哈哈…這其實是我剛剛開始做這種頁面的內心活動。下面說一下我做這種頁面的過程：
1、 1920 * 1080 等比例縮放
這是我第一版做出來的方式，但是這個方式做出來是有弊端的
（1）不能適應所有的螢幕，例如：1280 * 800、1024 * 640
（2）左右結構頁面，這只是其中的內容區，如果採用這種方式就會出現滾動條視覺上不友好，如果帶有全屏按鈕全屏後也會出現（1）的問題
2、 根據內容區與瀏覽器視窗進行橫向和縱向縮放
這個方法保證了頁面的布局不會錯亂而且字型顯示也比較合理，字型及布局就按px來設定就ok
缺陷：在解析度較低的大屏裝置上由於字型的大小和頁面的高度不匹配導致頁面中某些內容模組跑出內容區
解決：let elclientwidth = document.documentelement.clientwidth
elclientwidth >= 1920 ？100 : elclientwidth/19.2
給最外層的元素設定跟元素，字型用em來表示
ps：字型按em表示的基本用法相信大家都知道，它是按外層元素設定的字型大小來計算的，如果外層沒有設定會繼續往外層找，直到找到乙個外層元素設定了字型大小。需要注意的是當乙個盒子容器設定了字型大小如果他的寬高、行高、內邊距、外邊距等的em值都是根絕當前盒子容器設定的字型大小來計算的
好啦！其實大屏自適應頁面沒有那麼難，相信你一定看懂了我的內容。
額外知識點：全屏切換方法
handlefullscreen() else if (document.webkitcancelfullscreen) else if (document.mozcancelfullscreen) else if (document.m***itfullscreen)
} else else if (element.webkitrequestfullscreen) else if (element.mozrequestfullscreen) else if (element.msrequestfullscreen)
} this.fullscreen = !this.fullscreen;
}
大屏頁面能夠在大屏和電腦自適應
5760 2160是大屏比例，原型設計按照這個開發 如果通過zoom方式修改，只能針對大屏適應，下面的 能夠讓大屏頁面即在大屏適應展示，也能夠在電腦適應展示 監聽瀏覽器變化 window.onresize function var ratioy window height 2160 var rati...
Vue 實現大屏頁面的螢幕自適應
1.在配置檔案設定大屏設計的尺寸1920 1080 export default 大屏設計寬高 2.定義resetscreensize.js export function pageresize callback else var resizeevt orientationchange in win...
頁面自適應
原文 首先，在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是 網頁寬度預設等於螢幕寬度 width device width 原始縮 放比例 initial scale 1 為1.0 即網頁初始大小佔螢幕面積的100 由於網頁會根據螢幕寬度調...