移动端如何用rem实现适配

最新推荐文章于 2024-12-13 14:41:15 发布
原创 最新推荐文章于 2024-12-13 14:41:15 发布 · 950 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html #javascript

本文探讨了在CSS中px、em、rem单位的区别，强调了rem在移动端适配中的优势。介绍了如何封装375px规格页面的rem适配函数，并详细解释了在meta标签中设置viewport属性以实现响应式布局的方法。

   在css中单位长度用的最多的是px、em、rem，这三个的区别是：

          px是固定的像素，一旦设置了就无法因为适应页面大小而改变

          em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

          绝对单位   px
          相对单位   em  rem 默认相对单位 1em=16px  1rem=16px
                    em 相对于 父级 
                    rem 相对于根元素 html

 封装的函数

     封装的375px规格页面 rem适配的函数  放到js中直接引入就可以使用rem

           1rem=100px

         

最低0.47元/天 解锁文章
小杨不懂
关注
移动端 REM 适配
记录工作
01-18 775
大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告。PostCSS 一般不单独使用，而是与已有的构建工具进行集成。配置完毕，把服务重启一下，最后测试，very good。这是转换之后的，可以看到 px 都被转换为了 rem。
Vue在移动端基于rem适配实现思路及过程
qq_49896911的博客
06-21 1067
vue，vant，移动端适配
移动端适配rem
zzzley的博客
02-28 877
rem（root em）是相对单位，相对于根元素（html元素）的字体大小而言。例如，如果根元素的字体大小为16px，1rem就相当于16px。如果根元素的字体大小改变为20px，1rem就相当于20px。rem是一种强大的单位，因为它可以自动适应不同屏幕大小，从而实现移动端适配。rem是相对于根元素的字体大小来计算的，而根元素的字体大小又是根据设备的屏幕宽度来动态计算的。这样做的好处是可以实现页面的自适应，使得在不同大小的屏幕上，页面元素的大小和布局都能够保持一致，从而提供更好的用户体验。
移动端rem适配
阿锐的博客
03-03 517
document.addEventListener("DOMContentLoaded",()=>{ //获取html宽度浏览器兼容苹果5默认htmlfont-size16px lethtmlWidth= document.documentElement.clientWidth||document.body.clientWidth; //获取html对象 lethtmlDom=document.getElementsByTagName(...
rem实现移动端的适配
qq_45079530的博客
03-24 284
1.vsCode安装 px转rem的插件cssrem 2.页面所有内容有一个class为body-container的根块元素，设置版心的样式 .body-container{ min-width: 320px; max-width: 930px; width: 10rem; position: relative; } 3. ...
移动端的rem适配
qiaokelibangwo的博客
05-16 1683
移动端网页宽度几乎全为移动设备屏幕宽度的100%，而每个移动端设备的屏幕又有着各不相同的宽度。 为了使页面在在不同的移动设备上能够保持统一的显示效果，这个时候就需要为移动端网页进行适配了。 移动端的适配方案有很多种，比如百分比布局,弹性和rem.vh 布局。 flex + rem单位 做适配效果 （比如淘宝和小米移动端） 当前市场最多 flex + viewport width /vh单位 做适配效果 （比如 B站移动端 ） 新兴，马上的一个趋势 rem 适配 rem 单位 rem 是一个相对单位
移动端h5自适应rem适配最佳方案
最新发布
观千剑而后识器，操千曲而后晓声。
12-13 3075
最佳移动端h5自适应rem适配方案，灵活主流做法
vuevantUIaxios移动端项目rem做适配
08-10
4. Rem适配：Rem（root em）是CSS中的长度单位，相对于根元素（html）的字体大小。在移动端，通过设置html的字体大小，可以控制所有子元素的相对尺寸，从而实现屏幕适配。在本项目中，可能使用了媒体查询@media和...
基于 Vue3 + Vite + TS 的移动端 rem 适配技术详解
12-09
使用场景及目标：本指南适用于正在进行移动端开发的团队和个人，旨在帮助他们掌握 Vue3 + Vite + TS 架构下实现 rem 适配的具体方法，从而提升应用的用户体验。 阅读建议：在阅读本文档时，建议实际操作并结合项目...
移动端适配rem.js
10-13
移动端适配rem.js
移动端 rem 适配
qq_17731769的博客
05-16 402
具体适配还需以设计为准 分享两种适配，并附有计算方法。本文章以6的屏幕做上下适配 第一种简单实用，易于计算    ( 比如 设计稿 宽 20 px  = 0.2 rem )，弊 网络差时 css加载慢 页面会乱成一团 字体超大 算法 屏幕宽度 / 375 * 100  @media screen and (min-width : 320px){ html{
移动端 Rem 适配
weixin_46107920的博客
12-22 921
移动端 Rem 适配 适配的概念：实现页面在不同设备上等比， 也就是说 改变了一个元素在不同设备上占据 css 像素的个数 打个比方，比如说页面上有一个盒子，占移动端设备宽度的 50% ，在改变移动端设备的情况，把盒子由 iphone 6 的 375 px (css 像素)设备宽度的，放到 6 plus 414px（css 像素） 设备宽度的屏幕下，两个盒子仍然占据设备宽度的 50% 先要明白两个单位 em 和 rem： 在 PC 端浏览器下（以谷歌浏览器为主），字体的默认大小是16px，字体最小为12px
移动端REM适配
wangyangzxc123的博客
12-14 1077
1.PostCss-Pxtorem 配置 yarn add -D postcss-pxtorem // -D就是保存为开发依赖 2.创建 postcss.config.js 是PostCSS 的配置文件 module.exports = { plugins: { autoprefixer: {}, 'postcss-pxtorem': { // 根值：默认是37.5，来自于设计稿大小的10分之一 rootValue: 37.5, // 根植 .
vue2移动端项目rem布局适配
11-03
为了在Vue2移动端项目中实现rem布局适配，可以使用postcss-pxtorem插件来自动将px转换为rem。具体步骤如下： 1. 安装postcss-pxtorem插件：npm install postcss postcss-pxtorem --save-dev 2. 在根目录创建postcss....
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值