rem适配手机屏幕

最新推荐文章于 2022-11-14 11:20:31 发布

喵姑娘呀

最新推荐文章于 2022-11-14 11:20:31 发布

阅读量288

点赞数

分类专栏：每天进步一点点文章标签： rem适配手机屏幕 rem 适配

本文链接：https://blog.csdn.net/weixin_43389331/article/details/97268398

版权

rem适配手机屏幕em和rem记录在：https://blog.csdn.net/weixin_43389331/article/details/97262876好像对比em之后，感觉rem更好方便一些，不过就是当拿到手机屏幕大小时，需要计算一些值会复杂些。先确定把不同屏幕大小统一分为n等份的份数；用每个屏幕的大小（screen）分别除以份数n ；screen%n=font-size大小...

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

rem适配手机屏幕

em和rem记录在：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">
		<ti

最低0.47元/天解锁文章

喵姑娘呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
rem适配手机屏幕

rem适配手机屏幕em和rem记录在：https://blog.csdn.net/weixin_43389331/article/details/97262876好像对比em之后，感觉rem更好方便一些，不过就是当拿到手机屏幕大小时，需要计算一些值会复杂些。先确定把不同屏幕大小统一分为n等份的份数；用每个屏幕的大小（screen）分别除以份数n ；screen%n=font-size大小...
复制链接

扫一扫