vw布局相信大家都只了解一些，1vw相当于屏幕百分之一的宽度,这里介绍的一个方法是通过一些依赖，让你在vue-cli开发移动端放心的使用px，闲话不多说，上干货了。首先，安装 postcss-px-to-viewport，这玩意就是核心 看名字很容易看出用途吧，把px转换成vwnpm
转载
2024-07-07 12:33:36
146阅读
方案一：使用 scale-box 组件属性：
width 宽度 默认 1920
height 高度 默认 1080
bgc 背景颜色 默认 "transparent"
delay自适应缩放防抖延迟时间（ms） 默认 100
vue2版本：vue2大屏适配缩放组件（vue2-scale-box - npm）npm insta
转载
2024-03-18 18:56:20
1899阅读
前面几章节完成界面布局和事件响应，还未实现与后台项目交互，本节实现登录页面，与后台项目交互必须引入Axios Ajax组件，并且需要定义Axios拦截器判断当前请求是否已经登录。定义前端配置参数 比如dev.env.js文件内容'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.en
转载
2024-10-31 15:25:23
43阅读
文章目录今日心得完成问题其他tipsAttributesEventsSlot 今日心得完成问题安装clipboard出现问题一堆报错，都是缺胳膊少腿。。。其他tipselement-ui中的table组件pagination分页一些参数Attributes参数说明类型可选值默认值small是否使用小型分页样式boolean—falsebackground是否为分页按钮添加背景色boolean—f
文章目录一、通过 CSS：background-image方法一尝试：background-position: 0 0;（OK）方法二尝试：background-size: cover;【可采用】二、通过 img 标签（OK）思路 1、img标签动态绑定宽度（:width="fullWidth"）【可采用，较好】思路 2、在动态绑定宽度（:width="fullWidth"）之后，想方法剪掉多余
转载
2024-04-21 11:42:32
184阅读
1.前言spa页面的layout布局对于前端项目的影响至关重要，在我们进行web端开发的时候，前端的各种大小屏幕，各种内核的浏览器不同，会导致我们的页面呈现出不一样的效果，如何进行更好的取舍，怎么能够达到产品对于系统展示效果的满意度，其实我们要前端有一套布局理念，这种理念指导我们如何进行优雅布局，怎么才能不被不合理的需求左右。理念分为以下几点：整体布局，上左右风格，或者上下风格符合或者复杂的上菜单
转载
2024-04-03 09:27:33
1837阅读
CSS3方案:利用视口单位适配页面对于移动端开发来说，最为重要的一点是如何适配页面，实现多终端的兼容，不同的适配方式各有千秋，也各有缺点。就主流的响应式布局、弹性布局来说，通过 Media Queries 实现的布局需要配置多个响应断点，而且带来的体验也对用户十分的不友好：布局在响应断点范围内的分辨率下维持不变，而在响应断点切换的瞬间，布局带来断层式的切换变化，如同卡带的唱机般“咔咔咔”地一下又一
转载
2024-05-24 12:31:16
560阅读
由于表头和列是分开渲染的，通过el-table 设置fit属性，只能撑开表头，但是没有办法根据列的内容去适应宽度。网上找了一些使
原创
2022-12-21 10:18:32
2839阅读
目录前言1. 基本知识2. Demo3. 实战4. 模版 前言由于需要在登录时，附上一些用户说明书的弹窗 对于ElMessageBox的基本知识详细了解 可通过官网了解基本的语法知识ElMessageBox官网基本知识1. 基本知识Element Plus 是一个基于 Vue 3 的组件库，其中包括各种类型的弹窗组件，用于在网页上显示信息或与用户进行交互主要的弹窗组件包括 ElMessageBo
转载
2024-10-10 12:19:50
300阅读
安装lib和px2rem之后在build的utils中配置即可先使用vue脚手架初始化一个webpack项目vue init webpack 项目名项目初始化好了之后，进入项目目录中 (cd 项目名) 安装 li...
转载
2020-06-10 15:30:00
790阅读
2评论
问题：当前市场上手机屏幕宽度不尽相同，常见有320px（ipone5）、375px（ipone678）等等，而为了在不同宽度的手机屏幕上良好现显示网页，我们需要解决方案。原理：当前前端解决手机屏幕自适应的手段极多，究其原理，主要分为两大版块： 一、使用百分比长度单位，当前百分比长度单位一般如下：vw、vh、vm、em、rem、%，优点：一套css代码即可适应所有屏幕宽度不同的手机； 二、使用固
转载
2024-09-30 23:06:07
52阅读
需求：是实现全局页面中字体自适应。警告：下面实现主要是在Vue中进行配置的，把全局中的px转换成rem进行实现自适应窗口变化。一、实现方式：1、下载所需插件pnpm install lib-flexible-computer -S
pnpm i px2rem-loader -D
pnpm install postcss-px2rem-exclude -D2、在main.js进行全局引入impor
转载
2024-04-03 15:50:23
532阅读
rem布局（进阶版） 该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb，源码已在文章底部更新，2017/5/3） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置），此方案仅适用于移动端web <script>!function(e){function t(a){if(i[a
前言： 大神估计就没必要看了吧，新手淌水，大神勿喷，欢迎留言交流。 背景： （如果着急，可以直接下拉看最后一个遂。） vue项目1个，使用ruoyi-vue框架 前端小白1个，仅仅停留在能实现功能的层次，如果你问我vue是什么，我只能告诉你三个字 => "前端框架"。 在vue项目中，多个echar ...
转载
2021-08-17 16:20:00
595阅读
2评论
# Vue.js 在 iOS 页面中实现自适应布局
随着移动互联网的迅猛发展，越来越多的开发者开始将 Vue.js 应用到移动端的开发中，特别是 iOS 设备。由于 iOS 设备屏幕尺寸多样，因此我们需要对 Vue.js 应用进行自适应布局设计。本文将介绍如何使用 CSS、Viewport 和 Vue.js 实现 iOS 上的自适应页面，并提供示例代码。
## 1. 自适应布局的基本概念
自
原创
2024-08-26 03:17:45
70阅读
Layout布局1.创建布局通过Col组件的:span属性调整Layout布局，分为24栏。el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>2.分栏间隔通过Row组件的:gutter属性来调整
转载
2024-03-06 11:15:43
2221阅读
这是鼠年来的第一篇文章！也是刚开始远程上班，强制度假后拿到的第一个任务是完成微信公众号手机端项目的开发！话不多说，vue走起来！一、安装lib-flexible插件【lib-flexible】移动端弹性布局适配解决方案。用于设置rem的基准值，插件会自动对html根元素进行font-size的设定，默认会设置成屏幕宽度的十分之一。打个比方：如果当前屏幕的宽度是1920px，它就会自动给html标签
安装依赖cnpm install lib-flexible --save
#需要指定5.1.1版本
cnpm install postcss-pxtorem@5.1.1 --save引入插件（main.js里添加）//自适应rem插件
import 'lib-flexible';添加配置（脚手架2、3不一样）
cli3在vue.config.js中添加配置
module.exports = {
c
原创
2023-12-26 09:26:05
147阅读
autoHeight.vue 高度自适应
原创
2022-08-29 16:15:26
268阅读
背景 随着移动设备和前端技术的发展，交互页面也在移动端使用越来越频繁。但是移动设备屏幕的大小和分辨率并不一致，这导致了并不能按照pc端编写页面的方式去编写移动端页面。 随着实践地不断进行和技术的发展，逐渐形成了下面几个概念：自适应（Adaptive） 程序
