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>


相关文章
|
24天前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
设计稿750px移动端自适应,100px=1rem
设计稿750px移动端自适应,100px=1rem
|
10月前
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
304 1
|
前端开发
css中如何在一行计算固定宽度和自适应宽度
css中如何在一行计算固定宽度和自适应宽度
77 0
|
前端开发 搜索推荐
理解 rem 方案原理
在适配不同屏幕尺寸的设备时采用等比缩放的方案
124 0
理解 rem 方案原理
|
Web App开发 前端开发 JavaScript
动态REM
动态REM
|
前端开发
前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】
前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】
138 0
前端的那些必须要掌握的样式设置和布局【CSS、浮动、清除、固定、em、rem等等......】
|
iOS开发
WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现
rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数。
WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现
|
JavaScript 前端开发
rem 布局原理
rem 布局原理
225 0
rem 布局原理
px转换rem自适应手机样式
/ px转换rem var IntervalId = 0; window.onload = function() { IntervalId = self.
1387 0