我们在vue移动端项目中的适配一般都采用rem，但是rem也不是能兼容所有的终端。随着viewport单位越来越受到众多浏览器的支持，下面将简单介绍怎么实现vw的兼容问题，用vw代替rem当我们采用vue-cli脚手架搭建完项目，安装所有依赖包之后，用npm run dev启动后，在根目录有一个 .postcssrc.js 文件，文件结构如下：vue-cli默认已经安装以上三个插件：po
转载
2023-12-03 11:56:57
93阅读
在vue移动端项目开发中，按照UI设计图尺寸开发并且需要进行各屏幕的适配时，我们单独使用rem,vm,vh时极度不方便，所以笔者经过探索，调试，参考。总结出两种统一适配的方式:1.px转rem进行屏幕适配；2.px转viewport(vm,vh)进行屏幕适配px转rem进行屏幕适配1.首先需要在vue工程中进行安装(安装之后，运行程序时可能会出现报错，笔者遇到的是版本问题，所以就安装了指定的版本)
转载
2024-06-24 07:48:12
1222阅读
在开发移动端的时候需要适配各种机型，有大的，有小的，我们需要一套代码，在不同的分辨率适应各种机型。因此我们需要
原创
2024-03-15 15:40:19
257阅读
vuejs实战——PC端一、项目使用资源整合1、使用vue-cli脚手架工具搭建2、使用UI框架——elementUI二、使用vue-cli创建项目全局安装 vue-cli（$ npm install –global vue-cli）创建一个基于webpack模板的新项目（$ vue init webpack 项目名称）进入项目目录（$ cd 项目名称）安装依赖（$ npm install）运行项
转载
2024-09-06 16:12:53
155阅读
在开发移动端的时候需要适配各种机型，有大的，有小的，我们需要一套代码，在不同的分辨率适应各种机型。 因此我们需要设置meta标
原创
精选
2023-11-10 15:43:26
604阅读
# Vue适配iOS的完整指南
在开发移动应用时，尤其是使用Vue框架的应用，适配不同平台是一个重要的任务。如果你想让你的Vue应用在iOS上运行得更好，请遵循以下步骤。
## 流程概览
以下是实现Vue应用适配iOS的流程：
| 步骤 | 描述 |
|------|-----------------------------
在移动端项目中的字体在随浏览端的窗口尺寸改变（响应式），在Vue项目中我们可以用过脚手架Vue-cli来安装相应的依赖类库来实现这个功能。首先来创建一个新的项目vue init webpack vue-mobile 启动之后就看到初始的Vue项目的起始页面——Welcome to Your Vue.js App这个时候我们可以去看看项目的根目录下的文件 .postcssrc.js，里面有
转载
2023-12-15 11:44:56
104阅读
一直以来，移动端适配问题都是我工作中的一大难题，经常会碰到各种坑，今天有时间，为了能在新项目中更完美的使用vw来做移动端的适配，使用了一下vw在vue中的适配，下面记录一下。 使用Vue-cli来构建项目 $ npm install -g vue-cli （注意这里是使用的vue 2 不是cli3）因为cli3要在
转载
2024-04-25 09:04:29
150阅读
近日在项目完成时需要需要做到内容跟随屏幕可视窗口大小进行适配，然后想到用rem来实现适配问题 1.首先安装一个px转rem的插件npm install postcss-pxtorem --save2.新建一个rem.js文件// 设置 rem 函数
function setRem() {
const pageWidth = window.innerWidth;
//为了ie也能拿到
转载
2024-05-15 15:01:43
812阅读
iOS 设备现有的分辨率如下：
iPhone/iPod Touch
普通屏 320像素 x 480像素 iPhone 1、3G、3GS，iPod Touch 1、2、3
3：2 Retina 屏 640像素 x 960像素 iPhone 4、4S，iPod Touch 4
16：9 Retina 屏 640像素 x 1136像素 iPhone 5，iPod Touch 5
iPad
普
转载
2023-10-03 14:44:12
195阅读
另外2种自适应方式请阅读 前端简单实现移动端，web端自适应的写法1，安装 flexible和 postcss-px2rem（命令行安装）npm install lib-flexible --savenpm install postcss-px2rem --save简要介绍这两个包的用途：例如在Galaxy S III:例如在iphone6/7/8:flexible会为页面根据屏幕自动添
转载
2023-08-27 10:57:12
438阅读
最近用vue-cli搭建了一个管理后台项目，发现在win7的IE10-11下打开是空白的，win10的edge和chrome等其他浏览器都没有问题，因为vue官网告诉我们它是兼容ie9的，后来想了一下可能是es6的一些新特性IE浏览器不支持导致的。报错原因：Babel 默认只转换新的 JavaScript 语法（如箭头函数），而不转换新的 API ，比如 Iterator、Generator、Se
这里我写一下我自己用的vue 移动端适配 ，可能跟别人的不一样。但是效果是一样的。我
转载
2023-02-27 15:46:50
737阅读
在这个博文中，我将分享关于如何解决“vue ios安全适配”的问题，详细记录了每个步骤，并提供了一些实用的配置和应用实例。以下是整个过程的详解。
首先，我们来看环境准备阶段。在开始之前，确保你具备以下技术栈的兼容性，这将帮助我们顺利进行vue iOS的安全适配。
```mermaid
quadrantChart
title 技术栈匹配度
x-axis 技术成熟度
y-a
公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。 首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位rem，自适应看起来就很麻烦，不过无惧困难，困难才会看到你说，哟，厉害了，我闪~，下面慢慢聊来。浅析rem 首先rem是css单位，相比于px固定的像素单位，rem更加的灵活，还有现在也比较好的vm。如果从未了解过，可以先过过眼rem自适应。C
# Vue Position iOS 适配指南
在现代前端开发中，确保网站在各种设备上表现良好是至关重要的。对于使用 Vue.js 开发的移动应用，特别是在 iOS 设备上，布局和定位可能会出现一些适配问题。本文将教你如何实现 Vue 的位置适配，让你的应用在 iOS 上表现得更加优雅。
## 流程概览
在实现 Vue 的位置适配过程中，可以按照以下步骤进行：
| 步骤 | 说明
移动端rem适配方案rem适配原理方案1：rem+媒体查询方案2：js+rem方案3：vw+rem（不用查询屏幕宽度） 移动端适配经常使用的就是 rem; 主要有以下几种方案：1：rem + 媒体查询（@media）2：js + rem（查询屏幕宽度）3： VW + rem（不需要查询屏幕宽度） 这几种方式最终css写的单位是 rem;rem适配原理rem是一个相对单位。 是相对于根元素html
转载
2024-09-30 14:53:35
49阅读
在vue的项目初建过程中，使用了flexible.js，发现不兼容ipad以及iPadpro,各种查了资料，要在代码里面加入判断什么的，因为是不太熟悉，不知道到底在哪个位置添加，后来想了想，直接在html页面中添加就可以了，整个vue项目只有一个index.html的html文件页面，所以，到这里添加就是最好的了啦。~~<script>
// 用于适配ipad以及ipad
转载
2023-07-14 10:42:34
180阅读
原标题：Android 12首批适配名单公布：荣耀、华为手机不在其内谷歌已经正式发布了Android 12，新的系统底层带来了3个改动：更丰富的视觉元素，更全面的隐私保护，并且开始引入“多设备互联”的概念。说实话，Android 12的更新只能用“循规蹈矩”来形容，没什么可惊讶的。有趣的是，不少人发现，在Android 12测试版的首批适配名单中，居然没有发现华为、荣耀的踪影。不少人猜测，华为已经
转载
2023-09-13 17:08:52
57阅读
一、方案（原理见第二部分） 1、简单粗暴的方法，不需要知道是不是iphonex，有safe area就空出来。padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */2、多
转载
2023-09-21 10:12:07
120阅读
