您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页移动端rem适配

移动端rem适配

来源:二三娱乐

网上很多都说会pc网页开发,也就会了mobile网页开发。那么实际呢也是如此,但是对于新手来说却摸不着头脑无从下手,一直纠结于适配的问题,那么这里就来展示下rem适配。

展示rem适配代码

 //rem适配
 (function () {
        var  styleN = document.createElement("style");
        var width = document.documentElement.clientWidth/16;
        styleN.innerHTML = 'html{font-size:'+width+'px!important}';
        document.head.appendChild(styleN);
    })();
  • 这什么意思呢?就是把手机屏幕分成16份,每份设置为font-size,就是每份代表1rem。
  • 那我们要怎么用呢?直接在代码中引入普通js一样就可以了。
  • 那写css的时候要怎么写呢?写css的时候根据设计师给的图 宽度/16 就是1rem了,这又是什么意思呢?可以这么理解:


    举个栗子.jpg

如果设计师给的图是750px;那么1rem就是750/16=46.875px;也就是1rem代表46.875px;那如果在css中要写

.box{
  width:60px;
}

要怎么写呢?这么写

.box{
  width:1.28rem;
}

呃呃,这个1.28怎么来的?60px/46.875px*1rem = 1.28rem就是这么来的。
晓得没呢,那这样是不是每一个px转rem都要这么算呢?
没错,就是都要这么算,那是不是很麻烦呢,哈哈,不要着急,这个时候呢就有了less编译等
这里就以less编译举个例子:
index.less

@rem:46.875rem;
body{
    width: 60/@rem;
}

编译后
index.css

body {
  width: 1.28rem;
}

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务