【JS】JS+CSS自适应屏幕

• H5W3
• 2021-02-07 11:11:58

var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //获取屏幕的宽度

//获取HTML的Dom元素
var htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体
htmlDom.style.fontSize= htmlWidth/20 + 'px';

布局适配方式

• Media Query（媒体查询）：现在比较主流的适配方案，可根据视口不同编写不同样式达到适应效果，比如框架Bootstrap，它能完成大部分项目需求，但是编写过于复杂。
• flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，也是现在使用最多的布局方式。
• 固定高度，宽度百分比：这种方法只适合简单要求不高的webApp，一般在适应要求不高，或者大屏显示没有要求时候可以使用。

• 原理：将px替换成rem，在脚本中使用JS动态修改html的font-size适配，它可以根据根视口大小去改变基准元素的字体，然后进行等比缩放来进行变化，达到各种屏幕适应。

var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //获取屏幕的宽度

//获取HTML的Dom元素
var htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体
htmlDom.style.fontSize= htmlWidth/20 + 'px';

这种方式目前常用于webapp上，主要是使用rem特性来灵活改变字体大小，达到窗口大小改变等比缩放元素。

拓展部分：

以上是 【JS】JS+CSS自适应屏幕 的全部内容， 来源链接： www.h5w3.com/113866.html