移动端的vm vh是什么

2##### 1.什么是vm vh
1.他属于一种新兴的移动端布局配置，功能与rem
2.vm视口的最大宽度是1vw等于视口宽度的百分之一
3.vh视口最大的宽度是1vh等于视口高度的百分之一

2.如何自动适配vm,vh

1.安装依赖

1.npm install postcss-px-to-viewport -D

2.修改.postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {plugins: {autoprefixer: {overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']},'postcss-px-to-viewport': {viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vwselectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值mediaQuery: false // 允许在媒体查询中转换`px`}}
}

7.注意事项

这个项目中，不能有rem适配的数据，不然会被顶替

移动端的vm vh是什么相关推荐

vm vh移动端布局及 bilibili官网移动端首页布局
vm和vh是啥? 市场上的移动端大多数为flex布局,此时我们用到了rem这个单位,但是rem需要媒体查询,要根据页面是尺寸进行修改,而vm/vh省去各种判断和修改,像B站就通过vue和vm写的. v ...
移动端网页开发-vh/vw/rem
第一次做移动端网页开发,接触到的几个单位vh/vw/rem,记录一下. vh:相对可见视区的高度 vw:相对可见视区的宽度 rem:相对根元素的字体大小 "视区"所指为浏览器内部的 ...
css自适应单位布局vm,vh
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
vue的pc端适配vw vh rem
安装命令: npm i postcss-px-to-viewport@1.1.1npm i postcss-pxtorem@5.1.1 2.安装完之后在根目录新建postcss.config.js(和 ...
Vite + Vue3 项目中，使用 vw/vh 适配移动端，并通过 Android Studio 打包
目录 1. 使用 vw/vh 适配移动端 1.1 使用 vite 初始化项目 1.2 安装插件,将 px 转化成 vw 1.2.1 在 vite.config.ts 中,声明插件 1.2.2 手写 p ...
23-移动端布局方式-VM
文章目录移动端布局方式-VM 一.单位二.结合移动端的公式进行推算:dpr=物理像素/逻辑像素第一种情况:当设计图的大小是640px的时候第二种情况:当设计图宽度是750px的时候[重点] 三 ...
Html百分比设宽偏差大,前端开发之移动端适配详细讲解
适配问题怎么适配iphone6 1px问题为什么页面与设计稿会出现偏差? dpr=设备像素/ css像素,只有dpr等于1的时候,实际效果和设计稿的尺寸比例才是1:1. 因为iPhone6的DPR ...
前端面试之移动端适配篇(转载)
文章目录关于像素,括号中为别名设备像素(物理像素) 设备无关像素(设备独立像素) 设备无关像素与CSS像素之间的关系 -- 页面缩放比设备像素与设备无关像素之间的关系 -- DPR 设备像素与C ...
vm centos火狐找不到服务器
故障原因: 1.Centos 7 网络未打开. 2.VM 网络服务未开启. 解决办法: 1.打开centos设置,选择网络 2.选择开启 3.win端打开VM服务右键点击我们的电脑: 进入到管理界面 ...

移动端的vm vh是什么

2.如何自动适配vm,vh

7.注意事项

移动端的vm vh是什么相关推荐

最新文章

热门文章