vue自适应pc或移动端

最新推荐文章于 2024-06-03 20:21:49 发布
最新推荐文章于 2024-06-03 20:21:49 发布
阅读量1k 收藏 4
点赞数 1
文章标签： vue
原文链接：https://www.cnblogs.com/duanzhenzhen/p/10672631.html
版权

vue识别移动端或者Pc,更自由的跳转

在index.html中head标签内插入

<script type="text/javascript">
        if(/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(
               navigator.userAgent)) {
                 window.location.href = "移动端地址";
           }
</script>
何以坚坚
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuewaterfall瀑布流插件自适应PC移动端无需预设置高度
08-10
这是一款超轻量级的瀑布流组件，无需预设高度，支持PC和移动端。支持图片加载后重新调整顺序。
PC、移动端自适应等比缩放布局方案
11-16
PC、移动端自适应等比缩放布局方案
2021年12月vue+postcss+vant移动端自适应方案
weixin_44903107的博客
12-07 1456
1、安装插件 yarn add postcss-px-to-viewport -D 2、在项目根目录下添加.postcssrc.js文件配置如下 module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等 "postcss-px-to-viewport": { unitToConvert: "px", // 要转化的单位 viewportWi
一篇文章搞懂！vue中pc端与移动端适配解决方案（亲测有效）
最新发布
djemx2025的博客
06-03 3336
当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。
vue PC+移动端 自适应布局
zhao1239902的博客
02-16 1万+
之前自己接了个项目 PC+移动端 自动适配显示，因为手机端需要自适应，pc也是需要自适应 项目里 PC用的1920px，移动端用的375px，使用媒体查询适配显示 一、环境 使用lib-flexible,为html上添加 动态的font-size（屏幕宽度/10），根据宽度而变化 例如浏览器宽度为750px，则会自动设置为75px， 1rem就=75px 使用px2rem-loader，自动将css的px转成rem， 两个插件配合使用， 就能做到自适应大小 二、步骤 2.1 安装 lib-fl
vue项目pc端和移动端适配
zqq840818278的博客
09-19 1万+
vue项目pc端和移动端适配
Vue 移动端、PC 端适配
热门推荐
weixin_42754922的博客
12-03 1万+
Vue 移动端、PC 端适配可以使用lib-flexible、amfe-flexible​​​​​​​、postcss-pxtorem​​​​​​​、postcss-px2rem、postcss-px-to-viewport这几个插件。
Vue pc端自适应
rice__pudding的博客
08-02 483
1.npm install postcss-px2rem px2rem-loader --save 2.rem.js(文件) const baseSize = 16 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 1920 // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放
基于Springboot + Vue 开发的前后端分离博客(PC端自适应+移动端微信小程序+移动端App)+源代码+文档说明
11-29
- 代码支持多种搜索模式（Elasticsearch或MYSQL），支持多种上传模式（OSS或本地），可支持配置。Elasticsearch占内存较高，如果服务器配置太低，不建议使用。 - 新增网站导航功能，页面优雅美观。可自行添加自己...
移动端+pc端自适应适配解决方案
06-29
适用于前端H5 pc端的适自创适配方案，有效解决各个尺寸适配，根据浏览器可视区域自适应元素，使用方法：将资源下载下来，放入单独js文件中，独立写成一个全局方法，如果是vue项目就在main.js中引入。如果是原生js...
Vue+iView自适应后台模板.rar
11-12
它专为构建支持PC端和移动端的Web应用设计，提供了丰富的功能和优秀的用户体验。以下是对这套模板及其相关技术栈的详细解析： 1. **Vue.js**：Vue.js是一个轻量级的前端JavaScript框架，以其易学易用、灵活性高和...
vue项目实现pc端和手机端屏幕自适应
weixin_72459765的博客
10-28 6297
vue项目实现pc端和手机端屏幕自适应
使用vue，pc, 移动端 全设备适配方案
qq_39105508的博客
11-08 1752
网上的插件不能动态修改设计稿宽度，导致rem计算的差别比较离谱。我这里通过第一步得到的mode，来判断使用哪个设计稿类型。// 设置 rem 函数1920 : 375// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。// 设置页面根节点字体大小这一步配置完，已经可以看到不同尺寸下，html的 font-size动态改变了。
Vue PC端框架和Vue移动端UI框架
qq_45229580的博客
08-15 1512
在学习Vue的过程之中，我发现不管是 BAT 大厂，还是创业公司，Vue 都有着广泛的应用，而且框架层出不穷，学习文档也越来越多，Vue也越来越受欢迎。github地址：​。github地址：​。github地址：​。github地址：​。github地址：​。github地址：​。Vue移动端UI框架。github地址：​。github地址：​。github地址：​。github地址：​。github地址：​。...
vue移动端pc端自适应
周18的碎碎念
02-03 548
该安装的安装 1.import ‘lib-flexible/flexible’ 2.build/untils: const px2remLoader = { loader: 'px2rem-loader', options:{ remUnit: 144 // 设计图宽度/10 } } 3.node包里找到flexible.js function refreshRem(){ var width = docEl.getBoundi
前端基于VUE（PC/移动端）框架推荐，建议收藏
不抛弃、不放弃：Aaron莫言
01-07 2470
Ant Design Vue：Ant Design Vue是一个优秀的开源组件库，它是Ant Design的Vue版本，提供了一套美观、实用的组件，适用于构建现代化的PC端应用。Vant：Vant 是一款轻量、可靠的移动端组件库，专为Vue.js设计，提供了丰富的移动端UI组件和交互效果，能够快速构建精美的移动应用。Element UI：基于Vue.js的成熟的PC端组件库，提供了丰富的UI组件和交互效果，可用于快速构建大型后台管理系统。
​vue项目移动端、PC端适配方案​
Zhang_qishan的博客
10-09 3321
之所以设为37.5，是为了引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem ，将remUnit的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸，所以字体最好是用px来表示，至于适应，我们可以写媒体查询。那为什么你在这里写成了37.5呢？
Vue项目下页面自适应pc端不同分辨率自适应
Cheris_LT的博客
10-24 1553
1、lib-flexible插件，引入 lib-flexible插件，使 用lib-flexible 会根据设备的尺寸动态计算出HTML标签的 font-size 值,从而使得 rem 的计算能够自适应的进行调整。2、postcss-px2rem、px2rem-loader插件，作用为把px转变为rem。首先在main.js中引用：（可以使用npm下载，也可以直接下载文件，我这边是下载的文件）为了方便我们的快速应用，直接使用插件。别忘了在vue.config.js文件中的chainWebpack中配置。
手把手教你实现VuePC端，移动端适配
Orange71234的博客
06-21 8325
可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可。如果出现报错，请降低版本后重装依赖（在package.json文件中将版本修改为如下，然后终端运行命令npm install即可）（1）rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5；1、在vue.config.js配置如下。
用vue创建手机端和PC端两个页面 通过屏幕适配页面
slilx的博客
07-27 3006
使用 Vue.js 结合 Vue Router 和 CSS Media Queries，你可以轻松实现手机端和 PC 端页面的分开编写，并在不同设备上实现适配。如果你想创建一个手机端和 PC 端分开编写内容的项目，并且希望能够很好地适配不同设备，你可以考虑使用 Vue.js 框架，结合 Vue Router 和 CSS Media Queries 来实现适配。在创建项目的过程中，你可以选择是否使用 Vue Router，根据你的需要选择安装。目录下创建两个不同的目录，用于存放手机端和 PC 端页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值