Vue 使用 rem 适配移动端的H5页面

最新推荐文章于 2024-07-09 15:20:07 发布
最新推荐文章于 2024-07-09 15:20:07 发布
阅读量896 收藏 8
点赞数 1
分类专栏： vue.js 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011519923/article/details/121125825
版权

一、先看效果：分别对iphone5 ， 6，7plus ，X四种屏幕尺寸进行适配

 

 二、适配步骤

1.安装 postcss-pxtorem  ：

npm i postcss-pxtorem -S

2.在src 目录下新建rem文件夹，并新建rem.js文件，并添加代码如下：

//基准大小，一般UI给的设计稿是750px，所以我们只需要相应 计算：eg  32px /100 

最低0.47元/天 解锁文章
仰望星空1123
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue开发H5步骤详解（环境搭建+rem布局+域名配置+请求）
boy火巨的博客
06-11 2万+
环境搭建 01. 安装Node.js Node.js安装包及源码 下载地址为：https://nodejs.org/en/download/、64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi 02. 检测一下node版本，在cmd命令框框内输入命令 node --version 查看node是...
vue移动端html5页面根据屏幕适配的四种解决方法
10-17
在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下
vue移动端h5页面根据屏幕适配
换日线的博客
04-22 1031
效果图如下所示 media.js (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size function setBodyFontSize() { ...
兼容性问题---H5屏幕适配方案
最新发布
COCOLI_BK的博客
07-09 383
这些计量单位可以用来设置元素的宽度、高度、字体大小、边距、内边距等各种样式属性。使用合适的计量单位可以提高网页的响应性和灵活性，并确保在不同设备和屏幕尺寸上都有良好的显示效果。实现方式为：动态设置页面根元素大小，同时配合postcss-pxtorem插件pxtorem自动转换插件；第二步：配合px自动转rem的插件：postcss-pxtorem。：使用媒体对象@media根据屏幕的宽度设置不同的根元素大小。第一步：动态设置页面根元素大小。使用js动态设置根元素大小。
vue移动端h5页面根据屏幕适配的四种方案
疑问 搜索 动手 解决 记录
07-09 3080
方法一：引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案：（此处可点击） 淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分。这块也可以直接用js实现，后面会提到 具体引入和使用方法，移步github查看，非常详细。 方法二：viewport 的使用 github里边，有提到 viewport 的使用。我感觉这篇文章关于viewport 的介绍特别详
vue移动端H5适配方案-rem布局
hzj1369的博客
07-15 970
vue移动端适配rem
Vue+H5如何适配各个移动端？
Amelian的博客
04-05 3619
我们都知道，在做移动端的项目的时候，我们最首先的是要指定适配各种机型的方案，让一套代码能够在不同分辨率的机型下顺应自如。，相信你看完之后将会有很多收货！然后这篇文章主要是讲讲在实际运用上，且也是我在项目中使用的一种适配方案，感兴趣的小伙伴继续看下去吧~ps：若本文有写错或者遗漏的地方还望大家能够底下评论或者私信我，我们一起交流~
详解搭建一个vue-cli的移动端H5开发模板
11-21
【搭建Vue CLI移动端H5开发模板】 Vue-Mobile是基于Vue CLI构建的一个专为移动端H5开发设计的模板，它提供了一个完整的开发框架，能够帮助开发者迅速启动项目。这个模板采用了以下技术栈： 1. **Vue.js**：轻量级...
vue写h5页面的方法总结
10-17
总的来说，使用Vue.js编写H5页面，需要重点关注移动设备的适配问题，通过使用rem布局和灵活的脚本库，如lib-flexible，来简化开发流程。同时，借助合适的工具和插件来提高工作效率，确保H5页面在各种移动设备上均能...
vue移动端h5页面根据屏幕适配的四种方案.docx
11-22
Vue 移动端 H5 页面屏幕适配四种方案 在移动端 H5 页面开发中，屏幕适配是一个非常重要的方面。不同的屏幕尺寸和设备像素比都需要不同的适配方式。下面我们将介绍四种常见的屏幕适配方案。 方案一：淘宝开源的可...
Vue移动端基于rem适配方案（简单易懂，无脑复制粘贴）
张先生的前端日志
10-29 487
Vue移动端适配方案(vue-cli3) —— 相关npm包简述 lib-flexible ：由淘宝团队整出的一种弹性布局方案，是一个制作H5适配的开源库 postcss-loader：使用 PostCSS的方式处理css postcss-px2rem：用于将 px 转换为 rem 的插件 postcss-px2rem-exclude：postcss-px2rem不能忽略指定文件，此包用于增加排除 注意：仔细看各段小标题！！！！！！ npm安装 npm install --save lib-flexi
vue项目pc端使用rem进行适配 （lib-flexible+postcss-pxtorem）
qq_32835101的博客
07-29 1097
vue项目pc端使用rem进行适配 （lib-flexible+postcss-pxtorem）
vue项目PC端随屏幕分辨率与窗口大小自适应
wangdanYL的博客
10-13 1150
一、npm安装依赖 npm i lib-flexible -S npm i px2rem-loader -D 二、新建文件夹 在src下面新建utils文件夹，并新建一个js文件，取名为【flexible】 image.png 三、将下述代码全部复制进【flexible】文件中 (function() { // flexible.css var cssText = '' + '@charset "utf-8";ht...
vue2.x 的移动端适配
wangjiezhizun的博客
12-03 964
vue2.0的移动端适配 1. 安装postcss-loader npm i postcss-loader@3.0.0 2. 安装postcss-pxtorem npm i postcss-pxtorem@5.1.1 3. 创建postcss.config.js: 如下 4. 在 /src/libs/ 创建 rem.js 如下 5. 在 main.js 中 引入 import '@/libs/rem.js' // postcss.config.js module.exports = { p
vue项目中使用rem进行适配布局
wei80231996的博客
07-07 287
1.新建一个rem.js文件复制以下代码到js文件中 (function (window, document) { let rootVw = 750; function resize() { var ww = window.innerWidth; if (ww > window.screen.width) { window.requestAnimationFrame(resize); } else { if (ww
h5 rem vue_移动端h5之rem布局／px2rem
weixin_33680199的博客
01-13 139
理：px2rem.pnggulp脚手架下安装gulp-px2rem-plugin模块npminstallgulp-postcss--save-devgulpfile.js文件内处理vargulp=require('gulp');varpostcss=require('gulp-postcss');varpx2rem=require('postcss-px2rem');gul...
vue2项目使用rem布局
weixin_42280496的博客
12-08 656
vue2项目实现rem自适应布局
vue2写h5使用rem适配
weixin_57065954的博客
05-17 415
【代码】vue2写h5使用rem适配。
vue中使用rem适配方案
u010227042的博客
08-03 6326
一、移动端适配常见方案： （1）通过媒体查询的方式即CSS3的meida queries （2）以天猫首页为代表的 flex 弹性布局 （3）以淘宝首页为代表的 rem+viewport缩放 （4）rem 方式 参考博客：https://blog.csdn.net/chenjuan1993/article/details/81710022 二、vue中使用rem适配方案 1、安装插件 （这里我使用的是cnpm比较下载安装快速） cnpm i lib-flexi...
vuepc端适配移动端
12-06
针对Vue PC端适配移动端，可以采用以下两种方法： 1.使用rem单位进行适配 可以使用引用[1]中提到的适配方案，根据浏览器可视区域自适应元素。具体实现方法是将设计稿的尺寸除以一个基准值，然后使用rem单位进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值