【JS】JS+CSS自适应屏幕
JS+CSS自适应屏幕
逡橙发布于 今天 03:18
布局适配方式
- 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特性来灵活改变字体大小,达到窗口大小改变等比缩放元素。
拓展部分:
chromecssjavascript前端
阅读 9发布于 今天 03:18
本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
逡橙
1 声望
0 粉丝
逡橙
1 声望
0 粉丝
宣传栏
目录
布局适配方式
- 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
得票时间