rem适配所有屏幕大小demo分享

最新推荐文章于 2024-09-08 10:10:08 发布

原创最新推荐文章于 2024-09-08 10:10:08 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #rem适配

【杂记】专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何使用REM单位实现响应式布局，包括三种方案：通过calc函数动态调整根元素字体大小、设置不同屏幕尺寸的固定字体大小及按比例动态调整。提供了具体的计算方法和示例代码。

方案一

利用css的calc函数对html元素的font-size大小进行计算，100vw是viewport视区的宽度（即浏览器内部的可视区域大小，window.innerWidth），然后可以自己设定一个全宽为多少，意味着将屏幕几等分，例如将屏幕10等分，那么1rem = 100vw / 10，这也就是根元素的font-size值，此时如果你的设计稿为750，你就可以得出一个计算设计稿中某个区域宽高的rem值的公式：width / 750 * 10rem（width / 750是宽度占设计图的比例，10rem是设计图的全宽），这样的话根元素font-size值就可以自动根据设备进行变化（因为此时根元素font-size值为10vw，当你的设备变化时，vw对应的大小也会自动变化），但是这样每次去计算可能太麻烦了，解决方案自然是给1rem一个方便计算的值，比如说100px，假如在750px的设计图中：

// 首先
1rem = 100px
100vw = 750px
// 所以
1rem = 100vw / 7.5 = 13.333333333vw
// 最后设置根元素font-size为13.333333vw即可

这样当你1rem = 13.333333vw时，获得一个宽高为60px的div的rem值就很好计算了，直接：

div {
	width: .6rem;
	height: .6rem;
}

后面两种方案都不如第一种方案，一键设置自动变化，有兴趣的朋友也可以看下

方案二

其实就是按照方案一的算法，把一些屏幕大小范围设置一个指定的font-size~~~(可能需要配合媒体查询)

方案三

当屏幕小于一个最小值，给根元素font-size设置一个定值，当屏幕大于一个最大值，给根元素font-size设置一个定值；最大和最小之间，等比例增加font-size,每一份所占font-size为：
(max-fontsize - min-fontsize) / (max-screen - min-screen)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
    <style>
    	.demo{
    		width:2rem;
    		height:2rem;
    		position:absolute;
    		top:0;
    		left:0;
    		right:0;
    		bottom:0;
    		margin:auto;
    		padding:0.1rem;
    		box-shadow:inset 0px 0px 0.2rem 0.01rem #1db11d;
    		font-size:0.4rem;
    		color:red;
    		font-family: "arial";
    	}
    	@media screen and (min-width: 240px) and (max-width:1500px){
			html{
				font-size:calc(100vw/10); /* 将屏幕10等分 */
			}
		}
		@media screen and (min-width: 1500px){
			html{
				font-size:200px;
			}
		}
		/*
		方案二:
		@media screen and (min-width: 240px) {html{font-size:32px;}}
		@media screen and (min-width: 320px) {html{font-size:42.66px;}}
		@media screen and (min-width: 360px) {html{font-size:48px;}}
		@media screen and (min-width: 375px) {html{font-size:50px;}}
		@media screen and (min-width: 400px) {html{font-size:53.33px;}}
		@media screen and (min-width: 414px) {html{font-size:55.2px;}}
		@media screen and (min-width: 440px) {html{font-size:58.66px;}}
		@media screen and (min-width: 480px) {html{font-size:64px;}}
		@media screen and (min-width: 520px) {html{font-size:69.33px;}}
		@media screen and (min-width: 560px) {html{font-size:74.66px;}}
		@media screen and (min-width: 600px) {html{font-size:80px;}}
		@media screen and (min-width: 640px) {html{font-size:85.33px;}}
		@media screen and (min-width: 680px) {html{font-size:90.66px;}}
		@media screen and (min-width: 720px) {html{font-size:96px;}}
		@media screen and (min-width: 760px) {html{font-size:101.33px;}}
		@media screen and (min-width: 800px) {html{font-size:106.66px;}}
		@media screen and (min-width: 960px) {html{font-size:128px;}}
		*/
		/*
		 方案三
		html{
			font-size:50px
		}
		@media screen and (min-width: 400px) and (max-width: 960px){
			html{font-size:calc( ( 78 / 560 ) * ( 100vw - 400px ) + 50px );}
		}
		@media screen and (min-width: 960px){
			html{font-size:128px;}
		}
		*/
    </style>
</head>
<body>
	<div class="demo">
		hello,这里是rem demo!
	</div>
	
</body>
</html>