首页 > 其他分享 >VUE

VUE

时间:2023-05-13 11:37:10浏览次数:29  
标签:10 VUE rem 视口 vw document

移动端适配方案

1、设置视口

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

2、通过设置html的rem

首先视口已经设置了,每次刷新后,会恢复到全屏的时候,

通过JS获取到当前宽度,然后等分宽度(10等分、20等分)

var rem = document.documentElement.clientWidth / 10
document.documentElement.style.fontSize = rem + 'px'

1rem = 手机全屏的十分之一

 3、vw

可见宽度100等分vw

 

标签:10,VUE,rem,视口,vw,document
From: https://www.cnblogs.com/huodetiantang/p/17396999.html

相关文章

  • java基于springboot+vue的农机电招平台、农机租赁管理系统,附源码+数据库+文档+PPT,适合
    1、项目介绍该系统包括前台操作和后台管理两个部分,一方面,为用户提供首页,农机,系统公告,个人中心,后台管理等功能;另一方面,为管理员提供首页,个人中心,农机机主管理,使用者管理,农机类型管理,农机管理,农机预约管理,系统管理等功能。项目获取,看这里2、技术框架编程语言:java系统架构:B/S......
  • 富文本编辑器 VUE-QUILL-EDITOR 使用教程 (最全)
    VUE-QUILL-EDITOR基于QUILL、适用于VUE的富文本编辑器,支持服务端渲染和单页应用,非常高效简洁。一.基础用法1、NPM导入VUE-QUILL-EDITORnpminstallvue-quill-editor--save2、引入VUE-QUILL-EDITOR在全局中引入importVuefrom'vue'importVueQuillEditorfrom'v......
  • 记录--9个封装Vue组件的小技巧
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助组件是前端框架的基本构建块。把它们设计得更好会使我们的应用程序更容易改变和理解。在这节课中,分享一下在过去几年中工作中学到的9个技巧。1.你可能不需要创建一个组件在创建一个组件之前,看看它是为了可重用......
  • ant-design-vue中,如何将固定头部(layout-header)中的menu-item元素移动到右边
    官方的文档显示的都是左边,提供的API也没有移动到右边的功能 在ant-design-vue的群里面问了,然后又去各种问。有人建议可以用row和col来解决,也是可以,但是为了保持格式完整性,最好是在menu中去修改,不然,按键和其他按键不一样,很麻烦。去ant-design(ant-design-vue算是ant-design的分......
  • vuex
    一、vuex理解https://vuex.vuejs.org/zh/guide/mutations.html vuex是组件状态管理,使用的是store容器去储存组件状态https://blog.csdn.net/m0_70477767/article/details/125155540详细介绍以及下载加入实例想要更改store中的状态唯一方法是提交mutation,mutation是同步操作,a......
  • Vue3--使用脚手架创建一个vue应用,实现todolist
    一、安装脚手架,运行项目1.1安装,运行首先安装16.0或更高版本的 Node.js然后在cmd安装并执行create-vue它是Vue官方的项目脚手架工具npminitvue@latest可以选装一些功能组件,或者不装,在项目被创建后,通过以下步骤安装依赖并启动开发服务器 依次执行上面的命令,然后......
  • vue3 hooks
    一.在项目目录中新增hoos文件夹 import{ref,onMounted}from"vue";//vue3中的hooks就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,//或者说是一些可以复用的公共方法/功能。其实hooks和vue2中的mixin有点类似,但是相对......
  • Vue内 ElementUI 动态表头渲染顺序错乱问题
    column渲染顺序不正确数据如下:['增加','描述','修改时间']错误显示:原因自定义:同一层级下条件渲染复数个<el-table-column>标签导致的正确做法在一个<el-table-column>标签内通过<template>条件渲染度娘上的一些其他做法添加一个宽度为1的列<el-table-columnwidth......
  • vue在手机端页面缩放的控制
    1,问题的提出某vue前端程序,在手机APP上运行。需要做多图片浏览效果,要求如下:进入浏览页面时,显示适应手机页面的缩小图,用户可采用双指缩放,放大查看小图用户点击图片时,弹出大图,宽度尺寸固定为1200px大图可移动查看,但不允许缩放,点击大图后退出以上要求中,第2和3叠加后,可能造成显......
  • Vue2电商实战项目(三)
    排序的操作要求的数据格式-数据格式说明-'1'表示'综合排序'-'2'表示'价格排序'-'asc'表示'升序'-'desc'表示降序-项目的数据格式的样子 -1:asc -1:desc -2:asc -2:desc###Search.index.vue......&quo......