h5移动端rem适配

最新推荐文章于 2024-04-13 13:14:42 发布
最新推荐文章于 2024-04-13 13:14:42 发布
阅读量256 收藏
点赞数 1
分类专栏： 前端 文章标签： rem h5 移动端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47346395/article/details/117947610
版权
  • npm i postcss-pxtorem@5.1.1
  • npm i amfe-flexible
  • 在main.js中引入包：import 'amfe-flexible'
  • 在项目根目录下创建.postcssrc.js,注意这个文件名前有个点，然后根据需求进行配置:
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616093330232.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzM0NjM5NQ==,size_16,color_FFFFFF,t_70#pic_center在这里插入图片描述

这个配置是根据375设计稿来写的，如果是750设计稿只需要改rootValue为75即可，这一套配置可以实现项目中部分页面需要适配移动端的应用场景。

iyy.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解H5 活动页之移动端 REM 布局适配方法
09-27
主要介绍了详解H5 活动页之移动端 REM 布局适配方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
H5移动端适配方案rem/vw
不想被卷出去的前端老鸟
12-02 6739
H5移动端的适配方案
H5移动端开发 之 rem适配
m0_58575070的博客
05-26 987
的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如某个元素宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。1.安装插件 postcss-pxtorem， postcss-pxtorem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位。3.安装插件 lib-flexible, 该插件会自动在html的head中添加一个。4.在main.js中引入 lib-flexible。
h5应用如何适配移动端(干货总结)
最新发布
qq_48896417的博客
04-13 974
H5应用的开发是前端必备技能,h5适配移动端也是业务常见的场景,如何进行必要的适配,今天做一个比较全面的总结。
超详细讲解H5移动端适配 —— 移动端适配方案
李水灵的博客
10-30 3293
目前来讲这三种方案是现在用的最多的方案，它们都有各自的优缺点。
移动端H5网页的rem适配方案
baidu_39340547的博客
09-25 281
以常见的移动端网页设计规范为例，设计稿尺寸一般为750*1334。为了使网页在各类型的手机设备中正常显示，常使用rem来进行布局，使其能自适应各类显示屏。当页面加载完毕，可是窗口大小变化时，都会触发html的字体大小重算。保证页面始终与设计稿一致。例如设计稿顶部为一个700px居中的banner图，则css代码如下。因此可以通过js获取不同设备的宽高，动态设置html的文字大小。
H5使用rem移动端适配方案
qq_44552416的博客
03-23 1556
谈到rem，我们首先就要说一下移动端的适配问题: 由于移动设备的尺寸不一，所以移动端的页面要能够适应不同尺寸的设备，即页面的自适应，让页面在视觉上保持一致。rem:rem 是css3的一种相对单位，参考是根元素HMTL的font-size的值，即html的;那么 **1rem = 10px;**我们使用rem主要作用就是为了适配移动端不同屏幕对应尺寸单位大小的区别来达到兼容效果。
rem.js 移动端 H5 解决各种机型适配问题的js
04-20
rem是 css3一种新的长度单位。它是相对于html标签的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。 一般用于在移动端H5页面中解决各种机型适配问题的js，文件中详细说明。
rem适配方法，针对少数型号手机做了适配
04-29
H5端rem适配方法，尤其针对某些手机，使用rem 之后仍然无法正常显示，针对某些手机做了适配判断，确保少数型号手机满足适配
h5rem自适应框架
12-14
移动端h5页面rem适配
超详细讲解 H5 移动端适配方案
weixin_62897746的博客
11-01 2152
在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。
rem移动端适配
01-28
适配移动端页面，
H5移动端适配方案
qq_27984747的博客
08-30 130
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，/* 以iPhone6为例：布局视口为375px，我们把它分成10份，则1rem = 37.5px，这时UI给定一个元素的宽为375px（设备独立像素），propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换。//获取html标签的宽度,并限制最大宽度。
前端h5界面适配 vw、vh、rem单位的运用
细节怪的博客
11-29 967
h5移动端适配
H5适配 之 viewport、rem
m0_50055983的博客
07-23 198
在中使用，用于定义窗口的各种行为。例如网页的缩放和平移、宽高等remrem为长度单位，是一种相对值，H5项目为了适配多种屏幕通常使用rem来达到效果。一般H5项目以375px宽度为标准值，那么为了方便我们可以把屏幕分为375份，每一份是1px；当屏幕宽度为375px时，1rem = 1px当屏幕宽度为700px时，1rem = 2px......所以不论屏幕的宽度如何，只要固定总宽度为375rem，就能达到各种窗口的适配。
vue移动端H5适配方案-rem布局
hzj1369的博客
07-15 901
vue移动端适配rem
H5移动端rem适配
north_katydid的博客
07-30 498
npm i postcss-pxtorem@5.1.1 --save //这个要装5.1.1版本的，高版本会报错。
rem、px、em(手机端h5页面屏幕适配的几种方法)
热门推荐
github_36758028的博客
12-06 4万+
px px像素（pixel）：相对长度单位。相对于显示器屏幕分辨率而言。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。 em 相对于父节点的font-size，会有一些组合的问题。比如你把body的font-size定义为50%，一般地会是8px。那么你在body里字体大小就是1em=8px了。可
uniapp移动端rem适配
04-02
在uniapp中实现移动端rem适配，需要遵循以下步骤： 1. 在uniapp的main.js中引入flexible.js，这是一个用于计算rem值的库。在引入之前需要安装该库： ``` npm install lib-flexible --save ``` 2. 在main.js中引入...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值