share555

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
AmazingCounters.com
查看: 43|回复: 0

Html5移动端网页端适配(js+rem)

[复制链接]

395

主题

769

帖子

2172

积分

金牌会员

Rank: 6Rank: 6

积分
2172
发表于 2021-3-15 09:40:39 | 显示全部楼层 |阅读模式

业务场景:由于需求是适配两端屏幕,所以刚开始想的css用rem写,但是还是会出现字体和布局不会等比缩放的情况,后来找到一种js代码针对根元素去做的缩放配置,加上rem和这个js的设置就能做到等比缩放。

下载插件,并修改比例 (如果ui尺寸是750就改50 375改25),修改完重启vscode

脚本之家-share555Html5移动端网页端适配(js+rem)(1)

脚本之家-share555Html5移动端网页端适配(js+rem)(2)

重启,效果图:

脚本之家-share555Html5移动端网页端适配(js+rem)(3)

2. 新建一个index.js,把下方代码复制进去,即可使用。

  1. //适配兼容
  2. (function (doc, win) {
  3. console.log(doc, win)
  4. // var docEle = doc.documentElement;
  5. const dpr = Math.min(win.devicePixelRatio, 3),
  6. scale = 1 / dpr,
  7. resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
  8. var recalCulate = function () {
  9. var docEle = document.documentElement,
  10. w = docEle.clientWidth,
  11. num = (w > 750 ? 750 : w) / 750; // **此时的750就是你设计稿的尺寸
  12. docEle.style.fontSize = (num * 100).toFixed(1) + 'px';
  13. };
  14. recalCulate();
  15. if (!doc.addEventListener) return;
  16. win.addEventListener(resizeEvent, recalCulate, false);
  17. })(document, window);
复制代码

到此这篇关于Html5移动端网页端适配(js+rem)的文章就介绍到这了,更多相关Html5移动端网页端适配内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!


来源:https://www.jb51.net/html5/763304.html
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|分享论坛

GMT+8, 2021-6-13 13:55 , Processed in 0.173456 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表