JS+CSS自适应屏幕

最新推荐文章于 2024-06-13 20:05:40 发布

Shansec~

最新推荐文章于 2024-06-13 20:05:40 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： css html javascript web

本文链接：https://blog.csdn.net/qq_44880095/article/details/113762265

版权

52 篇文章 2 订阅

订阅专栏

本文介绍了前端布局的几种常见方式，如MediaQuery、flex布局和固定高度百分比方法，并详细阐述了rem单位的工作原理及应用。通过JS动态调整html字体大小实现响应式设计，适用于webapp开发。同时提及了针对互联网电视的自适应策略，通过设置meta标签的视口大小实现等比缩放。

摘要由CSDN通过智能技术生成

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标签中直接设置开发时候基准的大小
<meta name="page-view-size" content="1920*1080" />

觉得写得不错的话，请用你们发财的小手点个赞叭！

Shansec~

关注