JS+CSS 自适应屏幕
SegmentFault
共 982字，需浏览 2分钟
·
2021-02-10 02:00
布局适配方式
现在比较主流的适配方案，可根据视口不同编写不同样式达到适应效果，比如框架Bootstrap，它能完成大部分项目需求，但是编写过于复杂。
主流的布局方式，不仅适用于移动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标签中直接设置开发时候基准的大小
评论