rem和viewport轻松解决屏幕适配
2019-12-25 本文已影响0人
踩坑怪At芬达
如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力
抛弃media查询
当你期望你的站点在任何屏幕下都按设计稿的原始比例展示的时候，这里提供2种方案，分别是:viewport和rem来解决
方案一 ：viewport
原理
我们经常在head里写的id为viewport的meta标签，其中initial-scale这个参数可以控制浏览器强制将页面整体缩放一定比例(0.0~1.0)范围，所以我们可以通过计算当前视窗宽度和我们设计稿默认屏幕宽度的一个比例，来放大或缩小整个页面
实现过程
-
开发过程中按照设计稿的尺寸进行开发，比如设计稿的屏幕宽度为
750px，上面有一个按钮大小为200px*100px，那么我们css就按照这个尺寸来写 -
在页面进入的时候通过当前屏幕宽度和设计稿的宽度比例来调整缩放比例
<head>
var scale = window.screen.width/750;
var viewport=`<meta id="viewport" name="viewport" content="width=device-width,initial-scale=${scale},user-scalable=no">`
document.write(viewport);
</head>
方案二：rem布局
原理
通过css的rem单位代替px来自动计算最终px值，rem是啥我就不多解释了，可以自行百度。
我们默认设置整个页面的html标签的字体大小为100像素 font-size:100px，这个时候如果我们给一个按钮宽度设置 1rem也就相当于1*100 px的大小，那么我们只需要改变html标签中的font-size的大小，就可以整体控制所有用到rem单位样式的的缩放比例了
实现过程
- 定义 html{font-size:100px}
- 开发过程中，根据设计稿上的 尺寸/100 来计算出对应的rem值，如设计稿上按钮是200px，则转换成
200/100=2rem - 在站点内加入计算比例的代码，并且监听窗口变化时，重新调用代码计算比例
- 完整代码如下：
<style>
html{font-size:100px;}
</style>
<html>
<div style="width:7.50rem;height:.8rem;border:4px solid green"></div>
</html>
<script>
var docEl = document.documentElement;
function reSetRem() {
let w = docEl.clientWidth;
var rem = w * 100 / 750;//这里750设置成设计稿对应的屏幕宽度
docEl.style.fontSize = rem + 'px'
}
window.addEventListener("resize",reSetRem);
reSetRem();
</script>
