小知识Vue.prototype和Vue.use的区别这个是全局可以通过Vue对象获取serring的值
Vue.prototype.$settings = settings;
这个是配置全局环境，不需要取用，就已经存在了
Vue.use(ElementUI);配置全局样式1.在assets里创建样式注意样式不能直接控制router-link标签，但是可以控制a标签，因为router-link最
(什么时候做响应式，怎么做响应式) 目前看来，内容为主的社区网站或者电商网站使用自适应布局的并不多，仅有的几个也没有做大范围的自适应布局，一般是使用媒体查询在几个断点（不超过三个，微博这样的只设置了一个断点）做响应式进行布局微调。内容为主（大量文字，少量图片）的网站不适合做响应式布局，大量图片少量文字的网站比较适合做响应式布局（比如花瓣，airbnb）。是否做响应式和用户体验没有必然关系。如果要做
转载
2024-10-08 09:53:32
70阅读
在 Viewport 等比适配始末 说过使用 Viewport 来实现等比适配的例子，本文详解等比适配的另一种方式推导拿到一个宽度为 vWidth 的视觉稿设设备屏幕宽度为 dWidth在视觉稿上量得一个元素的宽度为 eleVWidth那么要实现按照宽度等比适配，在各种设备中元素的实际宽度 x 将满足公式//等比
eleVWidth/vWidth = X/dWidth;
//我们
转载
2024-09-06 21:53:50
41阅读
近日在项目完成时需要需要做到内容跟随屏幕可视窗口大小进行适配，然后想到用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阅读
如果是做 PC 端的网页，无需做 rem 适配，但是做 H5 开发，rem 是需要做一下的 方案一： Vant 官方也为我们提供了方案，如下图所示： 咱们就按照官方为我们提供的方案进行适配，安装它们： yarn add lib-flexible -S yarn add postcss-pxtorem ...
转载
2021-10-12 16:01:00
729阅读
点赞
移动端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阅读
一. 移动端适配问题1、使用rem进行浏览器适配：比较常用rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它
转载
2024-04-25 13:50:35
211阅读
在vue移动端项目开发中，按照UI设计图尺寸开发并且需要进行各屏幕的适配时，我们单独使用rem,vm,vh时极度不方便，所以笔者经过探索，调试，参考。总结出两种统一适配的方式:1.px转rem进行屏幕适配；2.px转viewport(vm,vh)进行屏幕适配px转rem进行屏幕适配1.首先需要在vue工程中进行安装(安装之后，运行程序时可能会出现报错，笔者遇到的是版本问题，所以就安装了指定的版本)
转载
2024-06-24 07:48:12
1222阅读
本文简单介绍一下vue项目移动端的rem适配准备。首先移动端肯定用的是vant组件库，在开发移动端之前，通常要做好rem适配，当然也可以的vw适配，这里简单介绍一下rem适配。首先看一下vant官网上的介绍需要这两个插件：步骤一：安装 npm i amfe-flexible步骤二：引用 （在main.js里面引用一下下）import 'amfe-flexible'步骤三：看效
转载
2024-04-07 13:07:12
635阅读
安装 amfe-flexible、postcss-px2rem-exclude
cnpm i amfe-flexible postcss-px2rem-exclude --save
安装完毕，会在 package.json 文件的 dependencies 属性中看到如下：
2、在main.js文件中引入
import 'amfe-flexible'
3、配置postcss
转载
2021-08-13 09:29:23
253阅读
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，这里介绍一种比较简单的方案-rem常用解决移动端布局的方案大概有:flex弹性布局百分比rem布局百分比布局百分比布局采用百分比设置元素宽高，不再赘述flex布局父级设置display为flex子级通过flex参数来设置缩放比例，缩放条件，排序方式等，不再赘述今天我们重点要介绍的是:Rem布局下面提供两种思路:style1
大屏自适应之前有用过postcss-pxtorem之类的插件，但是插件只针对css样式，在js和vue模板中的样式，还有echarts的属性值都不能经过插件直接转换。要手动分装方法再次调用，就会比较麻烦，而且有时候写着写着就忘加了，开发就一个分辨率的显示器，最多就是f12打开挤兑挤兑测测。解决方案 ------- 缩放 + scrollbar（非全屏）可以使用transform: scale(${
夏眠不觉晓，处处蚊子咬，夜来键盘声，发落知多少？每天都在代码，虽然手底下马不停蹄的敲，但是该来的加班还是会来的，如何能更快的完成手头的工作，提高自已的开发效率，今天小编给大家带来了这几个Vue小技巧，终于可以在六点像小鹿一样奔跑着下班了。先赞后看，艳遇不断，哈哈哈哈~学会使用 $attrs 与 $listeners，二次包装组件就靠它了：前几天产品经理给我甩过来一份管理系统的设计原型，我打开看了看
移动端vw页面适配方案主要是借助以下几个PostCSS插件实现的。postcss-aspect-ratio-minipostcss-px-to-viewportpostcss-write-svgpostcss-cssnextcssnanopostcss-viewport-units首先呢我们需要先安装插件，如下：npm install postcss-aspect-ratio-mini
转载
2024-09-24 01:23:23
95阅读
vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法，而3.0对这三部分都做了更改。 1. 响应式（数据的双向绑定） 2.0的响应式
基于Object.defineProperty中的set和get方法实现
兼容主流浏览器和ie9以上的ie浏览器，
能够监听数据对象的变化，
但是监听不到对象属性的增删、数组元素和长度的变化，
同时会在vue初始化的
在平时的项目开发中，尤其是前端项目开发，经常会要求进行手机适配或者pc端分辨率的适配。目前比较常用的解决方案是使用flexible.js和rem结合解决。如下：1.下载响应式插件 npm i lib-flexible -D2.在项目中引入插件，比较常见的是在vue/main.js中引入import 'lib-flexible/flexible.js'3.要在nodemodule/lib-flexi
原创
2022-06-23 15:55:42
3956阅读
做移动端，最重要的是适配和兼容性问题，兼容性暂且不说，只聊聊适配问题，虽然网上文章有很多。1、我们所能看到的。移动端的viewport(设备展示页面的区域)分为三种layout viewport：大于设备屏幕的浏览器可视区域 。ps蓝色代表layout viewport 2.visual viewport：在设备屏幕上看到浏览器的大小。个人理解为上图红色框部分。3. ideal vie
一直以来，移动端适配问题都是我工作中的一大难题，经常会碰到各种坑，今天有时间，为了能在新项目中更完美的使用vw来做移动端的适配，使用了一下vw在vue中的适配，下面记录一下。 使用Vue-cli来构建项目 $ npm install -g vue-cli （注意这里是使用的vue 2 不是cli3）因为cli3要在
转载
2024-04-25 09:04:29
150阅读
作者：前端小黑前言 本文的目标是通过下文介绍的适配方案，使用vue或react开发移动端及H5的时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局，提升开发效率。下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。px2rem或postcss-px2re
在Vue 3.0中，与2.0版本相比有一定的差别，最明显的就是缺少了build、config文件夹，而在3.0中，关于项目的配置修改及webpack的修改，需要手动创建一个新的文件：vue.config.js。因为3.0版本中vue已经内置了很多关于webpack的配置，一般情况下开箱即用，需要修改则可以在vue.config.js文件中完成。所以这里记录一下，3.0版本中常用的配置项：// vu
