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>


相关文章
|
8月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
6月前
|
前端开发
css实用技巧——利用内联元素的padding实现高度可控的分隔线
css实用技巧——利用内联元素的padding实现高度可控的分隔线
36 2
|
6月前
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
725 0
|
7月前
|
前端开发
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
804 1
|
Web App开发 前端开发 JavaScript
动态REM
动态REM
105 0
|
iOS开发
WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现
rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数。
WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现
|
前端开发 JavaScript UED
CSS 技巧一则 -- 不定宽溢出文本适配滚动
CSS 技巧一则 -- 不定宽溢出文本适配滚动
262 0
CSS 技巧一则 -- 不定宽溢出文本适配滚动