大屏自适应页面开发分享

大屏自适应页面开发分享
说到大屏页面可能大家内心会感觉到一丢丢的发抖，因为感觉字体及布局控制实在是太困难了，哈哈哈…这其实是我刚刚开始做这种页面的内心活动。下面说一下我做这种页面的过程：

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()