[移动端适配] 到底写多少rem合适

最新推荐文章于 2025-06-05 21:40:57 发布
最新推荐文章于 2025-06-05 21:40:57 发布
阅读量332 收藏 2
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Madman528/article/details/138167837
版权

假如给375px设计稿 ,有个盒子给100px, 我改写多少rem呢?

如果用了自适应js, 那就是除以10

lib-flexible/index.js at 2.0 · amfe/lib-flexible · GitHub 

也就是html fontsize等于37.5px ,这时候你要转rem,你要写100/37.5

太麻烦了,有没有自动转换?

vscode插件

 改为37.5

ok了!

移动端适配（手机端rem布局详解）
weixin_45675581的博客
09-24 1307
问题的引出 如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范围在html上设置font-size的代码： html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and...
layui移动端适配_移动端适配
weixin_39524703的博客
12-01 4033
一套代码对应一份设计稿，实现向上/向下兼容自适应布局方案对比1.起步1.1rem 是什么rem(font size of the root element)是指相对于根元素``来做计算的字体大小单位。e.g. 设置html { font-size: 75px }时，其他元素1rem = 75px，4rem = 300px1.2vw 是什么vw`是基于`viewport`视窗的长度单位。`...
移动适配rem
qq_40832034的博客
06-11 1938
一、移动适配 背景：因为移动端不同设备宽高不同，需要一种方法使得对所有宽高布局一致。 方法： rem： 目前多数企业在用的解决方案 vw / vh：未来的解决方案 用像素做单位没有办法实现等比例放大缩小，用百分比做单位也不能完全解决。 对于宽度来说，其父级元素无须确定宽度就能设置百分比 若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式 1、rem单位 相对单位 rem单位是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 <style> h
移动端H5页面rem缩放方案flexible.js兼容375px方案的思路
weixin_33738578的博客
07-17 1057
参考： 移动端高清、多屏适配方案 viewport-and-flexible.js flexible.js github 一个新的项目复用了一些老页面，老页面是使用375px方案进行移动端适配的，meta[viewport]使用的是<meta name="viewport" content="width=375, user-sca...
移动端适配方案：Vue 项目 rem 布局与 viewport 设置实战
前端开发探索之旅
04-25 1006
通过使用 rem 布局和合理设置 viewport，我们可以在 Vue 项目中实现移动端页面的自适应布局。rem 布局利用相对单位的特性，根据根元素的字体大小自动调整元素的尺寸，而 viewport 设置则确保页面在不同设备上以合适的比例显示。在实际开发中，我们可以根据设计稿的尺寸，将元素的尺寸转换为 rem 单位，从而实现页面在各种移动设备上的完美适配。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
前端 CSS 移动端适配 rem单位与less 使用
weixin_53720617的博客
09-08 317
结论:制作网页参考，逻辑分辨率。概念：设计稿里面每个元素的尺寸的倍数作用：防止图片在高分辨率屏幕下模糊失真思考1. 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？ 2. 设备宽度不同，HTML标签字号设置多少合适？媒体查询当采用媒体查询的时候，当宽度不同时，都要写@Media 来进行查询，比较麻烦。现在可以不用写，直接引用 flexible.js 可以自动识别字号的大小。 rem - 移动适配
vue 移动端适配，rem适配
Yangliwei的博客
02-19 966
1，安装vue # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world 2，安装 postcss-pxtorem lib-flexible   postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 3，在vue.conf...
h5移动端屏幕适配方案（rem、vw）
热门推荐
醉逍遥neo的博客
09-25 2万+
1、概述 移动端屏幕大小不一，要使网页能自适应不同尺寸的手机屏幕，而且还要尽可能开发便捷，目前使用最多的还是rem大法，相对比较成熟，而新兴的vw方案也可以一试。 本文主要介绍了rem和vw两种方案的使用配置方式。 2、meta设置 首先移动端要设置好视口，使视口的宽度等于设备屏幕宽度，同时浏览器识别后就认为该网页是移动端网页，也就不再有点击延迟的问题了： <meta name="viewport" content="width=device-width, initial-scale=1.0, use
css 动态rem_移动端适配（手机端rem布局详解）
weixin_39640845的博客
11-21 461
1. 问题的引出如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范围在html上设置font-size的代码：html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and ...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
总的来说，移动端适配的关键在于理解不同设备的屏幕差异，并选择合适的工具进行像素单位转换，确保设计在各种屏幕尺寸下都能得到良好的展示。在Vue CLI3的环境中，`lib-flexible`和`px2rem`系列插件提供了方便快捷的...
一次讲清移动端适配解决方案-rem和vw.docx
10-26
### 移动端适配解决方案：rem与vw详解 #### 一、引言 随着移动互联网的迅速发展，用户越来越依赖于移动设备访问网站或应用。为了提供良好的用户体验，前端开发者需要确保页面能够适应不同尺寸的屏幕。在众多适配...
移动端适配 使px自动转换rem
12-14
先安装postcss-pxtorem： npm install postcss-pxtorem –save-dev 进行安装 通过屏幕的变化，设置动态根元素 font-size ：   我写在vue的html中 function setRem () { let htmlWidth = document....
基于 Vue3 + Vite + TS 的移动端 rem 适配技术详解
12-09
使用场景及目标：本指南适用于正在进行移动端开发的团队和个人，旨在帮助他们掌握 Vue3 + Vite + TS 架构下实现 rem 适配的具体方法，从而提升应用的用户体验。 阅读建议：在阅读本文档时，建议实际操作并结合项目...
移动端适配rem文件js代码.zip
01-17
"移动端适配rem文件js代码.zip"这个压缩包就是针对这一需求提供的一种解决方案，它包含了一个名为“rem.js”的JavaScript文件，用于动态调整页面元素的大小，以适应不同分辨率和屏幕尺寸的手机或平板电脑。...
JavaScript基础-数组/对象
m0_51324570的博客
06-03 1086
JavaScript 数组常用方法包括：`forEach`、`map`、等遍历方法，`push`/`pop`、`unshift`/`shift`、`splice` 等修改方法，以及 `slice`、`concat`。对象常用方法有：`Object.keys`、`values`、操作属性，`hasOwnProperty` 检查属性。Map 支持任意类型键的键值对存储，Set 用于存储唯一值。字符串可通过 [...str].reverse().join('') 翻转，用 includes 检查包含。
vue3 el-input type=“textarea“ 字体样式 及高度设置
往事知多少？
05-31 623
在Vue 3中，如果你使用的是Element Plus库中的<el-input>组件作为文本域（），你可以通过几种方式来设置字体样式和高度。
vue封装gsap自定义动画指令
m0_69250830的博客
06-04 213
gsap自定义动画指令封装
Vue3入门指南：从零到精通的快速上手
最新发布
2202_75362371的博客
06-05 704
index.ts//定义一个接口，用于限制Person对象的具体属性id:string,age:number//定义一个自定义类型Person.vue<template></div>let person:PersonInter = {id:'01',name:'齐爷',age:20} //接口规范let personList:Persons = [ //泛型约束{id:'01',name:'齐爷',age:20},{id:'02',name:'齐爷1',age:21},
JS ?? 运算符
海天鹰
06-03 206
如果左侧的值是 null 或 undefined，返回右侧的值；否则，返回左侧的值。
移动端适配全解析：rem与vw/vh布局技术实战
资源摘要信息:"移动端适配技术详解：从基本概念到rem、vw/vh的实现方案" 知识点一：设备像素和CSS像素 在移动端适配技术中，了解设备像素和CSS像素是基础。设备像素，又称为物理像素，是屏幕实际存在的像素点数量，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值