H5W3
当前位置:H5W3 > JavaScript > 正文

【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 国际》许可协议
avatar

逡橙
1 声望
0 粉丝

0 条评论
得票时间

avatar

逡橙
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特性来灵活改变字体大小,达到窗口大小改变等比缩放元素。

拓展部分:

本文地址:H5W3 » 【JS】JS+CSS自适应屏幕

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址