制作移动端、大屏时，用到的 rem单位和如何自己定义长度单位及解析

最新推荐文章于 2024-04-29 04:28:15 发布
最新推荐文章于 2024-04-29 04:28:15 发布
阅读量1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 原生javascript制作各种酷炫组件 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/109290417
本文介绍了在移动端开发中如何利用rem单位进行屏幕适配，并展示了通过JavaScript动态计算rem值的方法。同时，文章提到了如何自定义长度单位，如wpx和hpx，并提供了转换这些单位为px的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 如何制作移动端

名词解释：

设备像素比：非视网膜屏幕是指，屏幕可视区域宽度是320像素，就只能显示320像素的内容。视网膜屏幕是指，屏幕可视区域宽度是320像素，却能够显示640像素、960像素的内容。其中，屏幕可视区宽度叫设备独立像素，device independent pixels，简称dip或dp。屏幕能够显示的显示的实际像素数叫做物理像素。
设备像素比window.devicePixelRatio=物理像素/设备独立像素。

 

rem:rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。

 

首先是获取设备的设备像素比，根据设备像素比确定需要缩放的比例，根据缩放比例来确定窗口的宽度，根据宽度来确定rem的长度，用rem这个单位，动态调整html标签下的font-size的大小，以此来实现在移动端的自适应。

制作移动端要结合淘宝的flexible.js这个文件来解说

了解本专栏 订阅专栏 解锁全文
Flexible源码分析
Ranger_AA的博客
09-24 419
Flexible源码分析（转载） // 立即执行函数 (function() {})() 或者 (function() {} ()) // 主要作用：创建一个独立的作用域，里面所有的变量都是局部变量，避免了命名冲突问题 // 立即执行函数不需要调用，立马能够自己执行 (function flexible (window, document) { // 获取html的根元素 var docEl = document.documentElement // dpr 是物理像素比 var dpr =
移动端Web页面适配方案（整理版）
weixin_57550930的博客
10-22 4770
主要分为：【百分比|rem|vw/vh|响应式设计】 介绍： 移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。 早期网页设计采用静态布局，通过<meta>标签中的applicable-device应用设备标识识别移动设备，即<meta name = 'applicable-device' content = 'mobile'>，在<meta&g
手淘移动端适配方案——lib-flexible.js
09-18
移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战，总结了一套移动端适配的方案——flexible方案。
vue移动端适配插件lib-flexible
weixin_34308389的博客
08-24 1295
使用vue-cli安装好一个vue的项目 npm install -g vue-cli vue init webpack my-project cd my-project npm run dev 配置vue插件 lib-flexible 安装插件 lib-flexible npm i lib-flex...
一种简单的 rem 单位基准设置
ddk87869的博客
10-26 1031
1rem换算成的像素值等于 html元素的font-size值 如果设置html的 font-size为 100px，那么设计稿的像素转换成rem只需要除以 100即可。 function setRem(designWidth, maxWidth) { var htmlElm = document.documentElement; ...
vue/cli3.+创建的项目移动端兼容，vue/cli3.+创建的项目使用lib-flexible做移动端项目兼容，lib-flexible做H5移动端兼容
01-16 442
cli2.+创建的项目做兼容去看另一篇文章：【查看】 使用 cli2.+ 创建的项目并使用 lib-flexable 做过移动端兼容的都知道，要用 px2rem-loader 去转换单位，其实并不是非用 px2rem-loader 只需结合一个 px2rem 的工具就行，这里使用的是 postcss 提供的插件，叫 postcss-plugin-px2rem 安装依赖： npm install lib-flexable --save npm install postcss-plugin-px2rem -D
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践
xxxzzzqqq_的博客
03-15 3035
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
前端之路（移动web篇）
Halin's 优快云
01-23 702
移动web基础 移动端开发现状 移动web开发指的是需要适配移动设备的网页开发 移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术 移动web开发与pc端web开发的区别是什么？ 移动端的浏览器与pc端不同 谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器 欧朋浏览器 百度手机浏览器  360安全浏览器  搜狗...
前端面试八股文（超详细）
热门推荐
m0_50861631的博客
03-06 16万+
JavaScript \1. Promise 的理解 Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机： pending（进行中）、fulfilled（已成功）和rejected（已失败） 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 回调地狱 回调函数中嵌套回调函数的情况就叫做回调地狱。 回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。 一、Promise是什么？ Promise是最早
vue 使用lib-flexable，px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小，解决方案...
weixin_30673715的博客
11-03 241
最近在写移动端项目,就想用lib-flexable，px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX，避免被转成rem 可以参考一下这篇文章vue中的适配：px2rem 在webpack.base.conf.js中 v...
flexible.js
01-25
flexible.js 移动自适应插件,rem模式,阿里开发,自适应
手机上rem大小单位的设置
shidaping的博客
06-21 1506
html5中rem表示以根元素为基础的倍数值，比如html的font-size为14px,那么1rem代表14px,2rem代表28px。通常设计师给出的设计稿都是640相素或者750相素，刚好是iphone5或者iphone6p的宽度。为了和设计稿保持一致，并保证不同手机的兼容性。我们需要用js计算html的font-size。代码如下。 (function(){
自定义rem
weixin_30527143的博客
07-13 161
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,ini...
vue 项目接入 markdown(1)
最新发布
2401_84437170的博客
04-29 690
空(void)元素有那些？⾏内元 素和块级元素有什么区别？cookies,sessionStorage,localStorage 的区别？Doctype作⽤?serviceWorker的使用原理是啥？问：0.1 + 0.2 === 0.3 嘛？箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？serviceWorker的使用原理是啥？箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？Canvas 和 SVG 图形的区别是什么？如何实现浏览器内多个标签页之间的通信？HTML5 的离线储存的使用和原理？
vue自适应pc端界面（ lib-flexible ）
m0_53669317的博客
06-19 2487
文件路径：node_moudles/lib-flexible/flexible.js。
使用lib-flexible.js适配移动端UI设计750px设计图
weixin_33982670的博客
05-24 1219
最近在和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况，我们的UI设计是使用的iPone6的，（iphone6: 375px*667px 实际像素：750px*1334px）如果按照她给的尺寸直接复制那么你的页面尺寸就是一个放大镜，正常人都知道那是不对的，我在做的时候有两种解决办法： 　　一、UI设计尺寸定基数 　　　　可以和UI沟通在给你的标记尺寸大小时候，让她基...
rem单位的使用
lw_yl
09-26 5252
1.对rem单位的简单认识： rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。而根节点就是节点。 2.对rem单位的简单换算： 我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系： 12px/16px=0.75rem 14px/16px=0.875rem 16px/16px=1r...
响应式数据大屏开发rem、%、vh/vm
共同进步
06-13 3205
响应式数据大屏开发rem、%、vh/vm 我们在开发数据大屏的时候难免会需要解决响应式问题 ，那么响应式是什么呢？响应式：响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化通俗的来说：自适应：元素随着屏幕发生宽高大小变化。
使用Flexible实现手淘H5页面的终端适配
weixin_30337157的博客
11-23 1288
使用Flexible实现手淘H5页面的终端适配 曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？ 那么趁此Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

紫微前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值