移动端rem适配方案以及vscode中cssrem的使用设置

csstmg

已于 2022-09-05 10:18:19 修改

阅读量2.8k

点赞数

分类专栏： element 文章标签： vscode javascript 前端

于 2020-07-02 20:13:27 首次发布

本文链接：https://blog.csdn.net/csstmg/article/details/107092025

版权

element 专栏收录该内容

104 篇文章 0 订阅

订阅专栏

rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。

无设计稿

首先需要在标签中加入

<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no">

<script>中

window.onresize = function(){
  document.documentElement.style.fontSize = document.documentElement.offsetWidth / 12 +'px';
}
/*
document.documentElement.style.fontSize 是得到<html>标签并为它设置font-size样式字体大小，因为REM计算的规则是依赖根元素也就是<html>元素的字体大小
document.documentElement.offsetWidth  是获取整个视口的宽度
*/

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无设计稿rem</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div style="width:10rem;height:100%;background:#f22;">div</div>
<script>
    window.onresize = getRem;
    function getRem(){
        document.documentElement.style.fontSize = document.documentElement.offsetWidth / 20+'px';
    }
    getRem();
</script>
</body>
</html>

让div一直占一半的位置也就是10rem

设计稿

如图设计让所有模式下都适配
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有设计稿rem</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
// 3块 例子中的.94rem =94px ;1.63rem = 163px;
<div style="position:absolute;left:.94rem;top:1.63rem;width:1rem;height:1rem;background:#f00;"></div>
<div style="position:absolute;right:.94rem;top:1.63rem;width:1rem;height:1rem;background:#f00;"></div>
<div style="position:absolute;left:2.7rem;top:3.38rem;width:1rem;height:1rem;background:#00f;"></div>
<script>
    window.onresize = getRem;
    function getRem(){
    // 640px 下除以6.4或者64   750px下除以7.5或者75  有的说fonstsize最小不要小于12px
        document.documentElement.style.fontSize = document.documentElement.offsetWidth / 6.4+'px';
    }
    getRem();
</script>
</body>
</html>

vscode中cssrem插件

要先安装 cssrem
补充一下
可以配置一个js文件 – base/rem.js
在main.js中引入 import ‘@/base/rem’

/* eslint-disable */
!(function (n) {
  var e = n.document,
    t = e.documentElement,
    i = 750,
    d = i / 100,
    o = 'orientationchange' in n ? 'orientationchange' : 'resize',
    a = function () {
      var n = t.clientWidth || 375
      n > 750 && (n = 750)
      t.style.fontSize = n / d + 'px'
    }
  e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener('DOMContentLoaded', a, !1))
}(window))

cssrem 配置为100或者50

csstmg

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端rem适配方案以及vscode中cssrem的使用设置

rem是什么？rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。无设计稿首先需要在标签中加入<meta name="viewport" content="width=device-width,ini.
复制链接

扫一扫