rem适配手机屏幕

比眉伴天荒 2021-11-23 02:22 465阅读 0赞

## rem适配手机屏幕 ##

em和rem记录在：[https://blog.csdn.net/weixin\_43389331/article/details/97262876][https_blog.csdn.net_weixin_43389331_article_details_97262876]

好像对比em之后，感觉rem更好方便一些，不过就是当拿到手机屏幕大小时，需要计算一些值会复杂些。

*  先确定把不同屏幕大小统一分为n等份的份数；
 *  用每个屏幕的大小（screen）分别除以份数n ；screen%n=font-size大小：因为rem是根据根元素字号来变化的。
 *  用媒体查询@media来设置不同屏幕下的html的字号；
 *  为盒子设置宽高：用rem单位：

\*\* 列子：\*\*  
320px, 360px, 375px, 414px不同手机屏幕大小；

*  分为20等份：
 *  屏幕大小%等份数： 320%20=16； 360%20=18； 375%20=18.75； 414%20=20.7；
 *  设置html字号大小
 *  为盒子设置宽高

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title></title>
    		<style>
    			body{
    				margin: 0;
    				padding: 0;
    				
    			}
    			/*
    			 每个不同屏幕适配：
    			 都分为20等份，用设计稿的标准宽度来除以20=？px;
    			 如320%20=16px(字体字号)
    			 * */
    			@media screen and (device-width: 320px){
    				html{
    					font-size: 16px;/*实际宽度16*20=160px*/
    				}
    			}
    			@media screen and (device-width: 360px){
    				html{
    					font-size: 18px;/*实际宽度16*20=160px*/
    				}
    			}
    			@media screen and (device-width: 375px){
    				html{
    					font-size: 18.75px;/*实际宽度16*20=160px*/
    				}
    			}
    			@media screen and (device-width: 414px){
    				html{
    					font-size: 20.7px;/*实际宽度16*20=160px*/
    				}
    			}
    			
    			div{
    				width: 10rem;/*实际宽度就是=10*16px=160px*/
    				height: 10rem;
    				background-color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>

这样就保证在不同屏幕下显示一样的效果了，自己可以在检查元素查看每一个不同手机屏幕下的宽高值。

[https_blog.csdn.net_weixin_43389331_article_details_97262876]: https://blog.csdn.net/weixin_43389331/article/details/97262876