在项目中用到UI给出设计图尺寸是1920x1080，如果直接在样式中使用会导致比想象中要大很多，这样需要做px转换为rem来适应屏幕，网上查了很多方法，下面是总结出的一种方法，亲测有效
1.安装依赖 postcss-px2rem-excludenpm install postcss-px2rem-exclude --save-dev2.创建个rem.js文件，用于计算文档字体大小，我是放到uti
转载
2024-07-22 19:41:37
273阅读
在Vue 3.0中，与2.0版本相比有一定的差别，最明显的就是缺少了build、config文件夹，而在3.0中，关于项目的配置修改及webpack的修改，需要手动创建一个新的文件：vue.config.js。因为3.0版本中vue已经内置了很多关于webpack的配置，一般情况下开箱即用，需要修改则可以在vue.config.js文件中完成。所以这里记录一下，3.0版本中常用的配置项：// vu
首先新建一个vue项目，然后安装element-ui组件，vuex状态管理等需要用到的。项目建立好能运行之后，在src/commponents文件夹下新建一个layout文件夹用于书写布局相关代码，在文件夹内新建header.vue,slider.vue,footer.vue,contentMain.vue,home.vue文件（当然也可以只新建一个home文件，把相关布局全部写在home.vue
动态布局动态布局主要表现在两方面： 1、布局本身是非固定的 2、布局的内容是非固定的引起布局动态变化的因素我们称动态因子，通常情况下，动态因子是css样式，也就是说，通过使用不同的样式以达到动态变更布局的效果。然后在特殊情况下，动态因子也可以是数据，也就是说，可以根据不同的数据来影响布局的显示从而达到动态的效果。知识点：grid布局，VUE组件显示效果场景一：完整显示3*4布局 场景二：完整显示3
移动端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
47阅读
近日在项目完成时需要需要做到内容跟随屏幕可视窗口大小进行适配，然后想到用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阅读
本文简单介绍一下vue项目移动端的rem适配准备。首先移动端肯定用的是vant组件库，在开发移动端之前，通常要做好rem适配，当然也可以的vw适配，这里简单介绍一下rem适配。首先看一下vant官网上的介绍需要这两个插件：步骤一：安装 npm i amfe-flexible步骤二：引用 （在main.js里面引用一下下）import 'amfe-flexible'步骤三：看效
转载
2024-04-07 13:07:12
635阅读
作者：前端小黑前言 本文的目标是通过下文介绍的适配方案，使用vue或react开发移动端及H5的时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局，提升开发效率。下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。px2rem或postcss-px2re
一、reactivereactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。获取数据值的时候直接获取，不需要加.value 参数只能传入对象类型import { reactive } from 'vue'
// 响应式状态
const state = reactive({
count: 0
})
// 打印count的值
console.log(
rem指的是根元素的字体大小，多数根元素大小为16px,但设备的dpi会影响根元素的大小，因此并不是固定的。 所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小，然后所有的元素尺寸都以rem为单位来写。上根据不同分辨率设置不同font-size有很多不好解决的麻烦,那应该如何解决呢？我们可以通过JS来计算不同分辨率下，font-size的大小，这是在我研究了网
一、安装插件npm i postcss-pxtorem lib-flexible -D二、postcss.config.jsmodule.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 8'] }, '...
原创
2022-01-10 15:42:42
134阅读
有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其
本文的主要内容如下：介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于inteceptor实现请求等待时的loading画面基于inteceptor实现请求错误时的提示画面 本文11个示例的源码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！ Git
最近想要做一些vue的插件练一下手，于是现在需要解决的问题有两个。一个是怎么写vue的插件，一个是写完后怎么上传npm。一、如何写一个vue插件首先在进行插件创作的时候，先建立一个普通的vue项目进行编写。vue create vue-button-z然后创建plugins文件夹，和plugins下的lib文件夹，在lib文件夹下写你的插件代码1.插件代码编写这是button.vue 文件示例，就
一直以来，移动端适配问题都是我工作中的一大难题，经常会碰到各种坑，今天有时间，为了能在新项目中更完美的使用vw来做移动端的适配，使用了一下vw在vue中的适配，下面记录一下。 使用Vue-cli来构建项目 $ npm install -g vue-cli （注意这里是使用的vue 2 不是cli3）因为cli3要在
转载
2024-04-25 09:04:29
150阅读
vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem一、第一步先安装 flexible和 postcss-px2rem（命令行安装）npm i lib-flexible -S
npm i postcss-px2rem -S简要介绍这两个包的用途：flexible会为页面根据屏幕自动添
转载
2024-10-08 19:47:09
751阅读
目录前言一、问题背景二、解决方案1.在Vue组件中引入Echarts2.初始化图表3.监听resize事件4.销毁图表三、优化方案1.防抖2.节流四、总结前言在实际的前端开发过程中，动态适配是一个非常重要的问题。在数据可视化的场景下，图表的动态适配尤为重要。在本篇博客中，我们将介绍如何使用Vue和Echarts实现图表的动态适配，让图表在不同设备上都能够完美地展示。一、问题背景在实际开发中，我们经
如果要写的项目是一个移动端时，用户需要使用手机访问，手机屏幕大小不一，所以需要去适配各种大小不同的手机，这个时候就需要使用REM适配技术 (解决同一个元素在不同设备中大小的变化)。1.什么是REMrem是一个相对单位，它是相对于页面中根标签html中的文字大小 2.为什么要用REM因为不同的设备，像素密度不同，根标签文字大
转载
2024-10-11 16:40:53
171阅读
1.vue自定义插件的作用插件通常是用来为Vue添加全局功能。插件的范围没有严格的限制。——一般有下面几种：添加全局方法或者 property。如：vue-custom-element添加全局资源：指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。一个库，提供自己的 AP
最近为移动端使用rem雪碧图小图标自适应困扰，想了半天终于找到解决方案！难点在于雪碧图要跟随屏幕缩小，下面我们进入正题！ 大家先要明白rem是什么，我给大家个新的理解，rem的本质就是百分比转换，不明白的童鞋可以具体去恶补下rem相关知识！既然rem的本质是百分比转换，那么我们也可以通过同样的方法转换雪碧图，下面上案例！  
