目录1、创建一个项目并启动2、设置根字体大小和单位转化3、去掉边框距离4、css的嵌套使用5、连接到手机上显示6、vant ui 库的使用6.1 基础用法6.2 底部导航栏7、模拟锤子商城7.1 请求数据7.2 解决跨越7.3 组件切换7.4 轮播图的实现 1、创建一个项目并启动npm init vue@latestcd demonpm installcode .npm run dev2、设置根
vue-cli3.0实现移动端自适应，亲测有效项目使用vue3.0编写代码，说要打包成apk文件，在安卓上看，现在需要适配移动端的样式，记录一下，亲测有效。安装插件vue脚手架略过lib-flexible : 会自动在html的head中添加一个<meta name="viewport">的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根
转载
2024-09-12 06:54:09
153阅读
至今除了小程序没怎么接触过移动端，问了下朋友移动端都是怎么做适配的 1.rem，这个单位转换比较麻烦，特意问了下有没有什么可以自动转的，这里给出一个叫px2rem-loader的工具，和lib-flexible一起使用的 2.boots tarp这个框架，，已经很久没用了，留个标记需要的时候去捡起来 ...
转载
2021-08-19 16:02:00
229阅读
2评论
当我们准备在移动端写HTML的时候，首先需要考虑到手机显示屏幕的大小与PC的差异性。我们可以通过两种方式进行媒体查询来区分移动端和PC端的访问用户。第一种，<style>
@media (min-width:500) and (max-width: 1000px)
.class{ background: #ccc; }
</style>当屏幕尺寸大于500像素且小于1000
Vue将px转化为rem适配移动端
1.下载lib-flexible
我使用的是vue-cli+webpack，所以是通过npm来安装的
npm i lib-flexible --save
2.引入lib-flexible
在main.js中引入lib-flexible
原创
2021-08-19 15:08:54
205阅读
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible/flexible.js'在index.html加上 <meta name="viewport" content="width=device-width,initial-scale=1.0"> <met...
原创
2021-08-26 11:21:26
512阅读
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible
原创
2022-03-08 14:40:36
435阅读
前端页面适配 不同设备分辨率不一样，因此需要页面适配 前端如何做页面适配？ css媒体查询实现响应式布局 这种方式的缺陷就是需要编写多套适配样式代码 css3 rem单位 W3C对rem的定义: font-sise of the root Element. 即根元素的fontsize大小 rem: ...
转载
2021-09-24 00:38:00
929阅读
2评论
文章目录先用官方的命令，新建一个nuxt项目改造目录在根目录新建src文件夹，将文件夹都剪切到src中，配置nuxt.config.js配置router.js配置eslint项目迁移安装插件配置别名文件迁移配置插件（我们自己封装的install插件）配置环境，以及不同的环境下打包到不同的目录修改package.josn里面的命令修改nuxt.config.jsnuxtjs中使用高德地图nuxt.
转载
2024-10-11 14:08:16
247阅读
一，原因既然看到这篇博客，说明各位已经知道为啥要做rem适配，以及rem适配的原理。 写这篇博客的原因在于，网上很多postcss-pxtorem 插件的配置都无法生效（原因在于创建项目的工具如vue-cli版本等的不同），生生地浪费了很多时间。于是重新整理下，套用下个神棍点地说法，就是亲测有效~~哈哈。二，使用postcss-pxtorem 的方法0，无效原因我的项目是使用vue-cli3创建的
transition过渡属性属性描述值举例transition简写，包含4个过度属性transition:width 1s linear 1s;transition-propertycss属性的名称all:所有属性都将获得过渡效果。transition-property:height;transition-duration过渡效果花费的时间，默认0transit
vue项目移动端、pc端适配方案vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-size
postcss-px2rem 自动将px单位转换成rem
一、安装 lib-flexible和 postcss-px2remnpm i lib-flexible -S
npm i postcss-px2rem -S简要介绍这两个包的用途：lib-flexi
转载
2024-04-04 11:38:14
1538阅读
背景在一pc端的web项目里，由于某些特性需要由动态语言处理，所以只在有需要使用vue来处理数据的页面，直接引入vue.js来处理。由于刚开始并没有打算使用前端来渲染数据和处理交互，所以使用了一些非vue的ui和插件，导致后来冲突坑点不少。非vue模块化下使用vue，虽然不能import vue文件，使用组件方式也有点恶心，但处理一些事情还是不错的。使用formdata提交表单数据先上代码&nbs
1、什么是px2rem px2rem是一个插件能将px自动转换为rem，以适配各种不同的屏幕尺寸。前端开发可以直接使用设计稿量出的尺寸或者蓝湖给出的px进行布局，这样极大的提高了开发效率。 2、前提条件 1、vue3.x新建的项目，这里只说vue3.x的适配，因为vue2.x一般都创建很久了，或者不 ...
转载
2021-10-21 23:03:00
746阅读
2评论
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值下面我们分别将这两个工具配置到项目中完成 REM 适配。一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）1、安装 # yarn a
转载
2024-05-20 12:33:33
405阅读
一个认真生活的人，都值得被认
转载
2022-04-21 13:49:39
365阅读
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阅读
今天，我们使用Vue CLI3 做一个移动端适配 。前言首先确定你的项目是Vue CLI3版本以上的u...
原创
2022-03-08 14:55:17
240阅读
今天，我们使用Vue CLI3 做一个移动端适配 。前言首先确定你的项目是Vue CLI3版本以上的。一、移动端适配包1、安装移动端适配包npm i lib-flexible -S2、在main.js引入适配包import Vue from 'vue'import App from './App.vue'import 'lib-flexible' // 引入适配包Vu...
原创
2021-08-26 14:41:51
203阅读
$(function(){ var currClientWidth, fontValue,originWidth; //originWidth用来设置设计稿原型的屏幕宽度（这里是以 Iphone 6为原型的设计稿） originWidth=640; __resize(); //注册 resize事件 window.addEventListen...
转载
2016-07-29 11:05:00
257阅读
2评论
