前端自适应布局

最新推荐文章于 2024-06-28 21:22:19 发布

WorkAndDebugger

最新推荐文章于 2024-06-28 21:22:19 发布

阅读量1k

点赞数

分类专栏： HTML 文章标签：前端 css3 javascript

本文链接：https://blog.csdn.net/Xiang_Gong_Ya_/article/details/121249816

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文探讨了前端布局中遇到的屏幕宽度不固定问题，以及如何通过REM布局来实现更灵活的自适应设计。作者分享了REM布局的工作原理，通过设置HTML根字体大小并利用JavaScript动态调整字体大小，以实现不同屏幕尺寸下的适配。同时，文章还提到了EM布局作为对比，并提出了对更优布局方式的探索。

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

前言

在最初接触前端的时候，就发现屏幕的宽度是不固定的，
而ui设计图是不固定的，开始的时候就没想到很好的布局
现在想想，这是不好的，不能实现良好的布局，不能自适应

其实有很多自适应的布局方式，以前我总是想使用%布局方式，但是发现全部都换算成%太麻烦了，所以总结了对我最满意的布局方式，那就是rem布局方式

rem

<!DOCTYPE html>
<html style="font-size: 10px;">
	设置html根字号的大小，不设置为浏览器的默认字号16px(设置为10px吧，整数挺好，也好换算)
	<head>
		<meta charset="utf-8" />
		<title>自适应</title>
	</head>
	<body>
		rem以html根字号的大小为标准（html字号为10px）则1rem=10px
		<div style="background: red;width: 1rem;">
			1
		</div>
		<div style="background: bisque;width: 10px;">
			2
			<!-- em以父元素为标准，父元素为10px，2em=20px -->
			<div style="background: aqua;width: 2em;">
				3
			</div>
		</div>
		
	</body>
</html>

console.log(document.getElementsByTagName('html')[0].style.fontSize='20px')
setInterval(function(){
	console.log(document.body.clientWidth)
	document.getElementsByTagName('html')[0].style.fontSize=`${document.body.clientWidth/60}px`
},1000)

但是感觉，无论怎么样的布局都好像不是太满意，有大佬指教一下吗？

WorkAndDebugger

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端自适应布局

前言在最初接触前端的时候，就发现屏幕的宽度是不固定的，而ui设计图是不固定的，开始的时候就没想到很好的布局现在想想，这是不好的，不能实现良好的布局，不能自适应其实有很多自适应的布局方式，以前我总是想使用%布局方式，但是发现全部都换算成%太麻烦了，所以总结了对我最满意的布局方式，那就是rem布局方式rem<!DOCTYPE html><html style="font-size: 10px;"> 设置html根字号的大小，不设置为浏览器的默认字号16px(设置为10
复制链接

扫一扫

专栏目录