rem适配

最新推荐文章于 2024-05-17 17:40:41 发布

朱宝鑫

最新推荐文章于 2024-05-17 17:40:41 发布

阅读量1.2k

点赞数

分类专栏： mobile

本文链接：https://blog.csdn.net/qq_30529627/article/details/51132259

版权

mobile 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

为了脱离框架，现阶段试用rem方式布局！如有问题会及时更新！

第一种情况：这里的方式是为了达到字体，图片高清而出现的解决方案，动态更改了meta viewport 的内容。

HTML：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/global.js" type="text/javascript" charset="utf-8"></script>
</html>

JS：global.js

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;//跟换宽度设置offsetWidth 代替clientWidth
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;

ps:文字直接用px

rem单位根据设计稿确认，视觉稿尺寸750*1334

rem = px / 基准值;

根据以上6s视觉稿的基准值就是75.

第二种：这种rem 配置并没有考虑高清等问题。

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

朱宝鑫

关注

0
点赞
踩
0

收藏

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

为了脱离框架，现阶段试用rem方式布局！如有问题会及时更新！HTML：JS：global.jsvar dpr, rem, scale;var docEl = document.documentElement;var fontEl = document.createElement('style');var metaEl = do
复制链接

扫一扫

专栏目录