JS+CSS 自适应屏幕

共 982字,需浏览 2分钟

 ·

2021-02-10 02:00

作者:逡橙
来源:SegmentFault 思否社区




布局适配方式


Media Query(媒体查询):

现在比较主流的适配方案,可根据视口不同编写不同样式达到适应效果,比如框架Bootstrap,它能完成大部分项目需求,但是编写过于复杂。

flex布局:

主流的布局方式,不仅适用于移动Web,网页上也表现良好,也是现在使用最多的布局方式。

固定高度,宽度百分比:

这种方法只适合简单要求不高的webApp,一般在适应要求不高,或者大屏显示没有要求时候可以使用。


rem 单位介绍
rem(font size of the root element)是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数


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


控制的JS写法


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


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


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




拓展部分:


目前在自适应这块像对于互联网电视,由于开发时候对图片尺寸是有严格要求,因此,集成时候只需要设置视口大小就可以对任何屏幕进行等比缩放。


一般会在meta标签中直接设置开发时候基准的大小





点击左下角阅读原文,到 SegmentFault 思否社区 和文章作者展开更多互动和交流,扫描下方”二维码“或在“公众号后台回复“ 入群 ”即可加入我们的技术交流群,收获更多的技术文章~

- END -


浏览 38
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报