rem根据不同屏幕分辨率自适页面布局

初级前端工程师毛毛

已于 2022-03-01 16:20:01 修改

阅读量331

点赞数

文章标签： css html sass

于 2022-03-01 15:54:44 首次发布

本文链接：https://blog.csdn.net/weixin_38891273/article/details/123208134

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*@media only screen and (min-width: 1920px){
			    html {
			        font-size: 16px !important;
			    }
			}
			@media only screen and (min-width: 2560px){
			    html {
			        font-size: 21px !important;
			    }
			}
			@media only screen and (max-width: 1920px){
			    html {
			        font-size: 10px !important;
			    }
			}*/
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
			}
			.box{
				width: 31.25rem;
				height: 31.25rem;
				background: blue;
			}
			.box0{
				width: 31.25rem;
				height: calc(100% - 31.875rem);
				background: red;
				margin-top: 0.625rem;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box0"></div>	
		<script>
            var width = document.documentElement.clientWidth
		    var css = `
		        html{
		        font-size: ${width/1920*16}px;
		        }
		        `
		    document.write(`<style>${css}</style>`)
		</script>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

初级前端工程师毛毛

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem根据不同屏幕分辨率自适页面布局

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> @media only screen and (min-width: 1920px){ html { font-size: 16px !important; } }.
复制链接

扫一扫