手写rem函数封装

最新推荐文章于 2024-03-02 22:03:06 发布
最新推荐文章于 2024-03-02 22:03:06 发布
阅读量112 收藏
点赞数
分类专栏： 笔记 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57262819/article/details/125812884
版权

使用rem自适应的原因

市面上手机的种类有三百多种 ,媒体查询这种方式 只能是范围性查找,
使用原生js函数封装的方式 ,自适应

代码实现:
在这里插入图片描述
第一步: 使用window 的事件监听方法 resize 事件
第二步: 函数体内部 声明变量 赋值 检测 window .innerWidth
第三步: 需要修改元素地方属性 ,就需要使用document.documentElement 算中标签元素 ,修改style里面的Font.size
注意: 上面选中元素 赋值的操作 是一个手机屏幕型号的适配 width/375+‘px’
在这里插入图片描述

在这里插入图片描述
这里乘以100 是PX在页面显示的太小

鱼丸粗面(●'◡'●)o(*￣▽￣*)o
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rem适配布局（rem+less+媒体查询 和 rem+flexible.js）
u013773608的博客
11-14 1842
css3 新语法。
前端必会的 HTML+CSS 常用技巧 之 移动端布局封装 rem.js 文件
ZhuangWei的博客
08-01 391
  话不多说，步入正题；   1、封装移动端布局 rem.js 文件 // 作用：重置html的font-size function resetRootFZ(){ var oHtml = document.querySelector('html'); var w = oHtml.getBoundingClientRect().width; // 设置根字体的大小等于html节点的宽度的十分之一 oHtml.style.fontSize = w/10 + 'px'; } resetRootF
CSS 【详解】响应式布局（含 rem 详解）
最新发布
朝阳39的博客
03-02 2234
为什么 rem 能用于实现响应式布局？ px 绝对长度单位，不同客户端表现都相同，不具有响应式 em 相对长度单位，相对于父元素的 font-size 值，不同元素的父元素的尺寸各不相同，没有统一标准。 rem 相对长度单位，相对于根元素的 font-size 值，页面中的根元素只有一个（即 html 标签），标准统一，可用于响应式布局。 <!DOCTYPE html> <html lang="en"> <head> <meta cha
css 动态rem_rem布局方案
weixin_39788382的博客
11-21 123
移动端适配，老生常谈的问题，这次再谈一次。 闲话少说，直奔正题。一些像素概念物理像素：即实际的每一个物理像素，也就是移动设备上每一个物理显示单元（点）设备逻辑像素（css中的px）：可以理解为一个虚拟的相对的显示块，与物理像素有着一定的比例关系，也就是下面的设备像素比设备像素比（dpr）：= 物理像素 / 设备独立像素(px)如果dpr为1的话，那么1px = 1物理像素，x轴y轴加起来就是1 如...
css--rem适配布局
cmy741741的博客
06-20 729
rem是单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。em的基准是相对于html元素的字体大小。使用时,可以通过设置html标签的font-size的值，可以用来控制整个页面的大小
PC/M端自适应规则封装，rem函数封装
06-03
rem封装
关于rem适配的3种常用封装
09-22
主要给大家介绍了关于rem适配的3种常用封装，文中通过示例代码介绍的非常详细，对各位前端开发者们具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
移动端vue使用的rem配置函数
07-18
移动端使用的rem配置函数，配置简单，使用时只修改一个参数即可
sass-rem:Sass函数和Mixin生成Rem值
04-12
Sass函数和mixin生成rem值。 安装 npm install @sass-collective/sass-rem --save 用法 功能 rem( $values ); 混合蛋白 rem( $property , $values ); 变数 名字 价值观 $baseline 16 在全局中更新默认上下文 @use ...
移动web开发之rem布局和less的相关
zh_hunan的博客
11-04 351
rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 媒体查询 什么是媒体查询 媒体查询（Media Query）是CSS3新语法。 使用 @media查询，可以针对不同的媒体类型定义不同...
移动端rem适配解决方案（完美版）
03-11
引用简单，布局简便 根据设备屏幕的DPR,自动设置最合适的高清缩放。 保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多） 有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）
rem.js适用于移动端
06-03
适用于移动端的单位转换工具，设计图是375的话直接可以用的。 100px=2rem。 使用时要放到引用的最前边。
Vant rem适配
Xiaocong__的博客
12-31 1891
vue中使用vant的rem适配 如果需要使用 rem 单位进行适配，推荐使用以下两个工具： postcss-pxtorem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 lib-flexible用于设置 rem 基准值 首先需要安装，安装命令如下： npm install postcss-pxtorem --save-dev 用于将单位转化为rem npm i -S amfe-flexible 设置基准值 怎么使用 首先创建一个postcss.js...
rem适配
m0_62351590的博客
01-03 319
第一种:手写rem <script> // 封装一个根据屏幕尺寸自动改变html的font-size大小的函数 function rem() { // 获取html的宽度 let htmlW = document.documentElement.clientWidth; // 获取body的宽度 let bodyW = document.body.clientWidth; // 兼容处理 let W = htmlW || bodyW;
rem vm 自适应屏幕大小布局
RenBaiLi的博客
09-05 579
一丶 rem 适配方案： Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具: postcss-pxtorem是一款postcss插件，用于将单位转化为rem lib-flexible用于设置rem基准值 安装并引入插件: 1.安装依赖 cnpm install lib-flexible postcss-pxtorem --save-dev 2. main.js 导入 1.创建.postcssrc.js module.exports...
rem布局封装及使用
s_turnTurn的博客
07-05 686
1.首先看封装好的js代码 //作用: 根据不同手机比例(宽度)设置不同的html的font-size //理解: 直接定义函数, 直接调用函数 //传入2个参数: // document 表示文档对象 // window 窗口对象 (function(doc, win, undefined) { //同时定义了3个对象, 根元素, 事件名, 匿名函数 var docEl = doc....
rem封装
weixin_60641464的博客
08-28 205
(function (doc, win) { var WIDTH = 750 // 拿到的设计图是多宽的，就将值设置为多宽 var docEl = doc.documentElement // 将html元素获取 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' // 获取resize事件，如果是在移动端，就使用orientationchange屏幕方向改变时间 ，如果在pc端，使用re.
vue移动端适配—手动rem适配
黄孝果的博客
06-16 4658
在index.html中 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximu
rem计算方式 手写rem vue引入rem
yuye1997的博客
01-26 1273
vue引入rem适配时，大多数人都是下载插件，这里分享一下单独建一个ts（js也可以)文件，自己计算rem。 在项目中新建rem.ts文件 const docWidth = 1920; const doc: Document = window.document, docEl: HTMLElement = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationch
matlab中rem函数
07-25
在Matlab中，rem函数用于计算除法的余数。它的原理是通过使用fix函数和floor函数来进行取整操作。具体来说，rem(x,y)命令返回的是x-n.*y，其中n = fix(x./y)。而mod(x,y)函数返回的是x-n.*y，其中n=floor(x./y)。这...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值