rem自适应生成代码

简介: rem自适应生成代码

rem自适应生成代码

  1. 创建rem.js
// 设置 rem 函数
function setRem () {
  //  PC端
  console.log('非移动设备')
  // 基准大小
  let baseSize = 16;
  let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
  let vW = window.innerWidth; // 当前窗口的宽度
  let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
  if(rem > 14) {
    document.documentElement.style.fontSize =  rem + "px";
  }
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
};
  1. 引入
<script src="./rem.js"></script>
<style>
  .panel {
    width:65.5rem;
    height:12rem;
  }
</style>


相关文章
umi 中如何使用 px2rem 插件做rem适配
在umi的src下面创建两个文件app.ts和document.ejs
323 0
|
6月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
4月前
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
659 0
|
5月前
|
前端开发
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
|
前端开发 搜索推荐
理解 rem 方案原理
在适配不同屏幕尺寸的设备时采用等比缩放的方案
207 0
理解 rem 方案原理
|
Web App开发 前端开发 JavaScript
动态REM
动态REM
100 0
|
前端开发
前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】
前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】
165 0
前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】
|
iOS开发
WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现
rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数。
WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现