vue 移动端网页适配

最新推荐文章于 2025-03-20 13:58:32 发布
最新推荐文章于 2025-03-20 13:58:32 发布
阅读量315 收藏
点赞数
分类专栏： 适配 文章标签： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lovexiaoqiu/article/details/107163987
版权

移动端适配 ，简单的一句话描述就是 ： 最大程度在各个尺寸屏幕上还原设计稿
最关键的是 rem，因为rem可以随根字体大小改变而改变，从而实现了自适应的功能。

最核心的一行代码 : document.style.fontSize = screenWidth / (750 / 32) + ‘px’

screenWidth 是不同设备的屏幕宽度，需要获取。
750 是设计稿，约定俗称的 2倍图。 750对应的 fontSize 正好是 32px.因为375 对应的 浏览器的默认fontSize 是 16px.经过换算后，会得到上面的这个公式。

vue移动端适配
qq_40919692的博客
04-01 157
vant组件库中的进阶用法推荐postcss-pxtorem和lib-flexible Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。 postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。其中的rootValue:37.5 不建议修改。 注意，若使用37.5则设计稿也建议使用375为标准的，尝试过使用7
vue移动端html5页面根据屏幕适配的四种解决方法
10-17
在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下
VUE页面适配
qq_33951051的博客
02-21 744
VUE 页面适配 // 适配rem (function (doc, win) {   var docEl = doc.documentElement   var resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’   var recalc = function () {     var clientWidth = docEl.clientWidth  
vue 适配屏幕分辨率，以及屏幕的缩放
最新发布
weixin_54820790的博客
03-20 379
utils新建一个文件devicePixelRatio.js。utils里面再新建一个rem.js。vue.config.js里面修改。在app.vue里面使用。main.js中引用。
【VUE】常见移动端适配方案_Vue 移动端适配
Liguangmei的博客
07-12 879
如果出现报错，请降低版本后重装依赖（在package.json文件中将版本修改为如下，然后终端运行命令npm install即可）① rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5；② propList是设置需要转换的属性，这边“为所有都进行转换”。在项目的根文件夹下创建postcss.config.js配置文件。测量多少px，写多少px，无需自己计算rem单位，会自动转换。创建一个项目，这里上一篇文章有仔细说过。在main.js入口文件引入。
（vue）移动端适配
weixin_46262596的博客
12-30 121
1使用postcss-pxtorem 1安装lib-flexible npm i lib-flexible --save 2、在main.js引入lib-flexible import 'lib-flexible/flexible' 3、安装postcss-pxtorem npm install postcss-pxtorem -D 4、配置postcss-pxtorem 在根目录的.postcssrc.js文件中修改 此文件自动生成，若没有，手动添加 module.exports = { "p
vue3移动端适配的解决方案（老方案）
12-01
Vue3 移动端适配解决方案是针对现代前端框架 Vue3 的一项技术实践，旨在确保在不同设备和屏幕尺寸上提供良好的用户体验。Vue3 提供了更强大的功能和更高的性能，但移动端适配是一个挑战，因为移动设备的屏幕尺寸、...
vue移动端屏幕适配详解
10-17
通过以上步骤，我们可以有效地解决Vue移动端的屏幕适配问题，使应用在各种屏幕尺寸下都能有良好的用户体验。记住，适配不是一次性的任务，而是需要持续关注和优化的过程，因为新的设备和屏幕尺寸总会不断出现。
vue移动端适配完美解决方案demo.rar
04-21
vue移动端适配问题,px自动转换vw,跟设计稿直接计算匹配,非常方便准确 免c币下载地址 https://download.lllomh.com/cliect/#/product/F421745961449998
vue 移动端适配方案详解
11-29
本文将详细讲解两种常见的 Vue 移动端适配策略：使用 `rem` 布局和 `lib-flexible` 插件。 ### 一、rem 布局 `rem`（root em）单位是一种基于根元素（通常是 `<html>` 元素）字体大小的相对单位。通过动态调整根...
vue3+vant移动端适配 px转换rem
HeXinT的博客
11-06 1346
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具： postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem lib-flexible 用于设置 rem 基准值 1.安装依赖 yarn add amfe-flexible 或者使用 npm i amfe-flexible 复制区：yarn add amfe-flexible npm i amfe-fl...
vue 移动端适配
IT_iosers的博客
09-11 185
"postcss": { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { "utf8": false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { "v.
Vue 移动端适配
weixin_44425559的博客
05-03 133
1.安装vue插件 lib-flexible npm i lib-flexible --save-dev 2. 在main.js 引入 lib-flexible import 'lib-flexible/flexible' 3. 安装vue 插件 px2rem-loader npm i px2rem-loader --save-dev 4. 配置 px2rem-loader 在build文件中找到util.js，将px2rem-loader 添加到cssLoaders 下面，如： cons
Vue移动端viewport设置和解决点击响应延时0.3s问题
weixin_30394669的博客
08-19 436
一、viewport <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,u ser-scalable=no"> 二、解决点击响应延时 0.3s 问题 <script src="https:/...
VUE 移动端适配（viewport）
zy991315的博客
03-05 727
VUE 移动端适配（viewport）
vue适配移动端
weixin_38673922的博客
07-07 173
vue-cli搭建好项目框架后，在目录结构的index.html文件中添加如下代码： fnResize() window.onresize = function() { fnResize() } function fnResize() { var deviceWidth = document.documentElement.clientWidth || window.innerWidth if(deviceWidth >= 750) { deviceWid
vue项目中移动端的适配
一只琪琪子的博客
11-08 1636
1、安装插件 ①安装 px2rem-loader（作用：通过配置基准，实现将px自动换算成rem） npm install px2rem-loader --save； ②安装lib-flexible（作用：根节点会根据页面视口变化而变化font-size大小） npm install lib-flexible --save; 2、配置utils.js文件（打开build文件夹下面的utils.js文件） 在当前文件中，找到下边的generateLoaders (loader, loaderOption
vue 移动端项目适配
08-19
在Vue移动端项目中进行适配，可以采用以下方法： 1. 使用viewport进行适配：在HTML的head标签中添加以下meta标签，用于设置viewport： ```html <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> ``` 这样可以让页面根据设备的宽度进行自适应，并禁用用户缩放。 2. 使用CSS的媒体查询：通过媒体查询来针对不同设备的屏幕宽度设置不同的样式。例如，可以根据设备宽度调整字体大小、元素间距等。示例： ```css @media screen and (max-width: 768px) { /* 在宽度小于等于768px的设备上应用的样式 */ body { font-size: 14px; } } ``` 3. 使用rem单位进行相对长度设置：rem单位是相对于根元素（html元素）的字体大小来计算的。通过设置根元素的字体大小，可以实现基于屏幕宽度的自适应。在CSS中使用rem单位来设置元素的尺寸，而不是固定像素值。示例： ```css html { font-size: 16px; /* 根据设计稿和设备屏幕大小设置合适的基准字体大小 */ } .container { width: 10rem; /* 根据设计稿中的尺寸来设置 */ } ``` 4. 使用CSS预处理器的mixin或函数：如果您使用的是CSS预处理器（如Sass、Less等），可以使用mixin或函数来简化适配的过程。通过编写通用的适配样式代码，可以根据需要在不同地方引用，减少重复的代码。 通过以上方法，您可以实现Vue移动端项目的适配，让页面在不同设备上有更好的显示效果。同时，还可以结合移动端调试工具，如Chrome开发者工具的设备模拟功能，来测试和调整页面的适配效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值