rem 响应式网站适配解决方案
2020年11月19日 技术分享>前端技术 web, 响应式, 解决方案, 适配本站文章除注明转载外，均为原创文章。如需转载请注明出处：
https://kwokronny.top/202011/web-rem-resolve/
REM 解决方案
主要思路
通过响应式设计稿尺寸不一的情况下，通过 resize事件 时判断窗口选用对应客户端的 设计稿宽度 运算，辅以 @media响应式 即可完美复现响应式的设计啦。
方案
以需开发 PC端 和 手机端 的响应式项目为例
将js代码放在
<head>内，且不依赖任何插件以保证他最早被执行。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22(function () {
function recal() {
let docElement = document.documentElement || document.body;
// #region 可根据响应式需求自由调整逻辑
let clientWidth = docElement.clientWidth,
designWidth = 1200; //PC端设计稿宽度（主内容区域）
if (clientWidth < 750) { // 客户端屏幕宽度小于一定尺寸时
designWidth = 640; //转为移动端设计稿宽度
} else if (clientWidth < designWidth) {// 客户端屏幕宽度小于 PC端设计稿宽度 但未需转换成 移动端设计 时
clientWidth -= 80
// 解决在750~1200左右单独设计的情况，让内容主体的展示有一定的留白
} else { //否则直接应用PC端设计稿宽度
clientWidth = designWidth;
}
// #region
docElement.style.fontSize = (clientWidth / designWidth) * 100 + "px";
}
window.addEventListener("resize", recal);
recal();
})();css预处理器编写函数(我这边用的是stylus)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ptr(px){
return unit((px / 100), 'rem');
}
body{
font-size: ptr(12)
}
@media screen and (max-width: 1200px){
.container{
width: ptr(1200);
}
}
@media screen and (max-width: 750px){
.container{
width: ptr(750);
}
}
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作!
