一直以来，移动端适配问题都是我工作中的一大难题，经常会碰到各种坑，今天有时间，为了能在新项目中更完美的使用vw来做移动端的适配，使用了一下vw在vue中的适配，下面记录一下。 使用Vue-cli来构建项目 $ npm install -g vue-cli （注意这里是使用的vue 2 不是cli3）因为cli3要在
转载
2024-04-25 09:04:29
150阅读
我们在编写样式的时候会遇到这样问题移动端动态计算字体的大小： 这个时候我们首先会想到使用rem，响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。比如： 使用脚本（方法一）(function (doc, win) {
let docEl = doc.documentElement
let resizeEvt = 'orientat
REST的SOA（SOA with REST）概念发展1992年网站（Web Sites）是在Web浏览器和Web服务器直接通过HTTP传输HTML。2000年WS-* （Web Services）是在客户端和服务器之间基于HTTP传输SOAP XML格式的数据，服务端用WSDL来规定契约。2007年RESTful （Web Services）是在客户端和服务器之间基于HTTP传输JSON、PO-
1. 安装VMware虚拟机工具；2. 安装MacOS 10.12版本；从crosstool-ng官网可以获取当前工具支持的各怕平台系统版本，笔者这里选用MacOS 10.12版本，下载地址：链接：https://pan.baidu.com/s/1JyTvVNEALCl1Jkgg1CmNNQ?pwd=7p9h 提取码：7p9h下载解压后会有一份.vmdk文件，直接将文件导入到VMwar
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。技术栈vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html
我们在vue移动端项目中的适配一般都采用rem，但是rem也不是能兼容所有的终端。随着viewport单位越来越受到众多浏览器的支持，下面将简单介绍怎么实现vw的兼容问题，用vw代替rem当我们采用vue-cli脚手架搭建完项目，安装所有依赖包之后，用npm run dev启动后，在根目录有一个 .postcssrc.js 文件，文件结构如下：vue-cli默认已经安装以上三个插件：po
转载
2023-12-03 11:56:57
93阅读
02-移动端单位介绍
前言在页面整体布局中，页面元素的尺寸大小（长度、宽度、内外边距等）和页面字体的大小也是重要的工作之一。一个合理设置，则会让页面看起来层次分明，重点鲜明，赏心悦目。反之，一个不友好的页面尺寸和字体大小设置，则会增加页面的复杂性，增加用户对页面理解的复杂性；甚至在当下访问终端（iPhone、iPad、PC、Android…）层出不穷的今天，适应各式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
原创
2022-07-22 14:33:15
58阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
原创
2023-03-24 19:17:04
24阅读
vw是由视口的宽度计算的 不同的设备完美视口的大小是不一样的 iPhone6 375 iPhone6plus 414 由于不同设备视口和像素比不同，所以同样的375像素在不同的设备下意义是不一样的. 比如在iPhone6中 375就是全屏，而到了 plus 中375就会缺一块 所以在移动端开发时，就
原创
2022-06-16 17:47:55
406阅读
什么是rem单位？rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（html元素）的font-size。默认情况下，html元素的font-size为16px， rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变fon
我们做网页写css代码的时候，通常会在最前面写一个通用选择符。有时候为了字体的计算，我们会将文章采用10px字体。写起来就像这样：CSS*{ margin: 0; padding: 0; border: none; font-size: 10px; }在制作响应式主题时，我们会根据所需屏幕的进行变化，并且采用VW（View-Width）来实现。比如我们准备开发一个宽度为640的网...
原创
2022-03-09 10:25:13
1056阅读
Vue-resource在实际开发 SPA 应用时，一般和后端都会采用异步接口进行数据交互。传统情况下，我 们常用 jQuery 的 $.ajax() 方法来做异步请求。但 Vue.js 并不依赖于 jQuery，我们也并不需 要为了异步请求这个功能就额外引用 jQuery。所以这里就和大家介绍下 Vue.js 的插件 Vue- resouce，它同样对异步请求进行了封装，方便我们同服务端进行数据
转载
2024-06-19 07:42:54
60阅读
上一章笔者介绍vux项目的搭建和简介，这里笔者设计几个登录注册页面，来讲解vux中的相关组件的使用，和vue的相关基础知识。 1.我们在与components文件夹同级的目录下创建一个views文件夹，文件夹中再创建一个user文件夹，用于存放和用户相关的页面操作。 在user文件夹下，笔者先创建一个Regist.vue文件。 2.现在注册组件已经有了，但是我们怎么才能让这个组件显示出来呢？
我们做网页写css代码的时候，通常会在最前面写一个通用选择符。有时候为了字体的计算，我们会将文章采用10px字体。写起来就像这样：CSS*{ margin: 0; padding: 0; border: none; font-size: 10px; }在制作响应式主题时，我们会根据所需屏幕的进行变化，并且采用VW（View-Width）来实现。比如我们准备开发一个宽度为640的网页，而基础字体我们
原创
2021-01-10 21:49:53
1050阅读
我们做网页写css代码的时候，通常会在最前面写一个通用选择符。有时候为了字体的计算，我们会将文章采用10px字体。写起来就像这样：CSS*{ margin: 0; padding: 0; border: none; font-size: 10px; }在制作响应式主题时，我们会根据所需屏幕的进行变化，并且采用VW（View-Width）来实现。比如我们准备开发一个宽度为640的网...
原创
2021-07-26 17:37:06
345阅读
介绍redis是键值对的数据库，常用的五种数据类型为字符串类型（string），散列类型（hash），列表类型（list），集合类型（set），有序集合类型（zset）Redis用作缓存，主要两个用途：高性能，高并发，因为内存天然支持高并发应用场景分布式锁（string）setnx key value，当key不存在时，将 key 的值设为 value ，返回1。若给定的 key 已经存在，则se
转载
2024-09-23 10:51:54
20阅读
在讨论“iOS vw rem 和安卓 vw rem”时，首先我们要明确这两个概念是什么。vw（视口宽度，viewport width）和 rem（根元素字体大小基数）是用于响应式设计的单位。这在不同的操作系统上可能会有一些差异，首先来看看这些背景信息，以及它们各自的适用场景。
### 背景定位
响应式设计的提出是为了适应多种不同尺寸的设备，尤其是移动设备。iOS 和安卓在处理 vw 和 rem
目录简单获取和追加数据铺页面用 post 给接口传值post 用 url 问号拼接数据简单获取和追加数据铺页面一、在api中新建该页面的js文件用于存放该页面的所有接口二、引用所需组件，调用接口（已经全局配置了接口地址）import axios from 'axios'
// 首页-我的展台
export function getQueryMyBooth(data) {
return req
转载
2023-11-26 17:22:37
112阅读
创建项目
vue create <Project Name>选择配置Manually select featuresbabel+ vuex + router安装依赖npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-un...
原创
2021-07-12 13:44:44
509阅读
