阅读 89

less+rem移动端适配

//less文件

// 定义变量 @rem: 375/16rem;

  • { padding: 0; margin: 0; }

html { font-size: 100/@rem; }

body { font-size: 18/@rem; }

.app { background-color: pink; width: 375/@rem; height: 300/@rem; }

html文件
<div class="app">
    你好 nihao
</div>
<div>
    basdbbasdb
</div>

js
(function() {
    // 计算屏幕宽度
    var vW = document.documentElement.clientWidth;
    // 计算字体大小
    var w = vW / 16;
    // 设置根元素的字体大小
    document.documentElement.style.fontSize = w + 'px';
})()
复制代码
文章分类
前端
文章标签