移动端适配方案、Rem适配方法

最新推荐文章于 2022-11-01 11:37:24 发布

Just-MenHee

最新推荐文章于 2022-11-01 11:37:24 发布

阅读量373

点赞数 2

分类专栏：前端文章标签：移动端设配移动端自适应 Rem适配 js设置rem 网站自适应

本文链接：https://blog.csdn.net/weixin_39417767/article/details/82107851

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

现在说一下rem ，rem是根字号的大小。也就是<html>元素的字号大小,

em是相对于自身的字号大小。

REM适配移动端就是用js设置根字号的值，然后所有的值都用rem来设置。

这个方法很方便，直接调用方法就可以。我封装了一个给大家参考。

var setRem = {
    init: function() {
        function set() {
          document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px';
        }
        window.onresize = set;
        set();
    }
};
setRem.init();

我这个是按照设计稿尺寸是750px来做的，之后在写CSS的时候所用的px尺寸除100，换成rem就行。

例如：一个div的盒子宽度是150px,你就设置成1.5rem就可以了。

Just-MenHee

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录