第1个回答 2024-09-04
本文主要记录了rem屏幕适配，rem屏幕适配分为两篇，这一篇为简单版的rem屏幕适配，介绍了简单版的rem屏幕适配，及其原理以及存在的问题，下一篇介绍优化版的rem屏幕适配，它很好的解决了1像素边框问题。
rem屏幕适配通过使用rem单位使网页，在不同屏幕尺寸下正常显示的一种移动端开发方案;
rem是CSS3新增的一个相对长度单位，相对于根元素（html）的font-size进行计算;
简单屏幕适配方案原理设置<meta>标签、获取视口宽度，动态设置根元素(HTML)的fontsize。
代码实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>Document</title><style>html{font-size:100px;}body{margin:0;padding:0;}div{height:1rem;background-color:red;border-bottom:1pxsolid#000;}</style><script>setRemUnit();addEventListener('resize',setRemUnit);functionsetRemUnit(){//获取视口宽度letviewWidth=document.documentElement.getBoundingClientRect().width||window.innerWidth;//基于设计稿375宽进行设置，可根据自己需要修改letrabtio=viewWidth/375;//设置fontSize，html的fontsize为100；1rem=100pxletfontSize=rabtio*100;//修改HTML的fontsizedocument.documentElement.style.fontSize=fontSize+'px';}</script></head><body><div></div></body></html>resize事件是在浏览器窗口被重置时触发的，如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发resize事件。
Document.documentElement是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的<html>元素）。
页面效果缺点简单屏幕适配方案的1像素边框问题；
1像素边框问题同样是1像素的边框，在不同清晰度的屏幕下、不同DPR下、相同的CSS像素渲染出的物理像素去却相同。
DPR为1时，1px渲染出1物理像素；DPR为2时，1px渲染出2物理像素；DPR为3时，1px渲染出3物理像素；
到此我们知道了简单版的rem屏幕适配的原理，以及存在的问题，下一篇将介绍优化版的rem屏幕适配，以及如何解决了1像素边框问题。
如果大家还有什么其他想法，欢迎在评论区交流！
原文：https://juejin.cn/post/7099095243248648200
logo设计
创造品牌价值
¥500元起
APP开发
量身定制，源码交付
¥2000元起
商标注册
一个好品牌从商标开始
¥1480元起
公司注册
注册公司全程代办
¥0元起
查
看
更
多
- 官方电话官方服务
- 官方网站八戒财税知识产权八戒服务商企业需求数字市场
相似回答
大家正在搜