移动端vw vh适配

最新推荐文章于 2024-08-27 15:08:39 发布

fuhs_2

最新推荐文章于 2024-08-27 15:08:39 发布

阅读量235

点赞数

文章标签： postcss css javascript

本文链接：https://blog.csdn.net/fuhs_2/article/details/122294553

版权

本文介绍了vw和vh单位在移动端布局中的应用，它们作为新兴的布局配置，类似于rem。vw代表视口宽度的百分比，vh代表视口高度的百分比。文章还提到了如何进行自动适配，并提及了安装相关依赖及配置过程。

摘要由CSDN通过智能技术生成

vw vh介绍

属于一种新兴的移动端布局配置，功能与rem类似
vw 视口的最大宽度，1vw等于视口宽度的百分之一
vh 视口的最大高度，1vh等于视口高度的百分之一

自动适配

安装依赖
npm install postcss-px-to-viewport -D

修改.postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
   
  plugins: {
   
    autoprefixer: {
   
      overrideBrowserslist: ['Android 4.1',

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fuhs_2

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

移动端的rem布局和VM布局

myazwj的博客

11-27

604

前言：在开发中我们会遇到ui给我们一套750px 的设计稿，但是我们使用vant组件库开发的话，里面的都是写好了的，它里面的是375px 我们要做的是怎么把给的需求完成： 1.使用使用rem适配 1安装 amfe-flexible插件 yarn add amfe-flexible npm i amfe-flexible 在main.js导入 import "amfe-flexible" 安装postcss-pxtorem .

rem vm 自适应屏幕大小布局

RenBaiLi的博客

09-05

618

一丶 rem 适配方案： Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具: postcss-pxtorem是一款postcss插件，用于将单位转化为rem lib-flexible用于设置rem基准值安装并引入插件: 1.安装依赖 cnpm install lib-flexible postcss-pxtorem --save-dev 2. main.js 导入 1.创建.postcssrc.js module.exports...

参与评论您还未登录，请先登录后发表或查看评论

一次搞懂数据大屏适配方案 (vw vh、rem、scale)

最新发布

幽幽谷

08-27

1433

如何做一款定制化的数据大屏？开发可视化数据大屏如何做自适应？ vw vh、rem、scale 到底哪种比较好？时间不够，有没有偷懒的方法？

使用vw进行移动端的适配_使用vw,vh 来做移动端适配

weixin_27199085的博客

02-05

674

我们做移动端项目的时候需要安装如下的插件；然后在package.json文件中配置"postcss": {"plugins": {"autoprefixer": {},"postcss-import": {},"postcss-url": {},"postcss-aspect-ratio-mini": {},"postcss-cssnext": {},"postcss-px-to-viewport...

浅谈rem布局和vm布局

weixin_30699463的博客

07-16

531

基础概念屏幕尺寸屏幕对角线的长度（cm）屏幕像素密度屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。屏幕分辨率横纵向上物理像素的个数（物理像素）物理像素（physical pixel）或设备像素（device pixel）物理像素又被称为设备像素，它是显示设备中一个最微小的物理部件。每个像素可以根据...

两种移动适配方案——rem、vmvh

m0_67391401的博客

03-17

937

移动适配 1. rem 媒体查询 flexiable.js 适配 2. vm/vh 移动适配指的是在屏幕宽度不同时，网页元素尺寸不同（等比缩放） 1. rem rem单位是相对单位，是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小例如在HTML字号大小为20px时，box盒子的宽度为5_20=100px，高度为3_20=60px /* 1rem = 1html标签字号大小 */ html { font-size: 20px; } .box {

vue3适配移动端vw vh单位配合@media做的适配

05-21

Vue3本身并不提供移动端适配的方案，但是可以使用vw、vh单位，以及@media媒体查询来实现移动端适配。 1. 设置html的font-size 在入口文件中，可以通过计算屏幕宽度来设置html的font-size，例如： ```javascript //...

vue3+typescript适配移动端vw vh单位配合@media做的适配

05-21

而vw和vh单位是用来做移动端适配的比较常用的单位之一，可以根据屏幕宽度和高度自适应调整布局。在Vue3中使用vw和vh单位，可以使用CSS预处理器如Sass或Less来定义变量，然后在组件中引入变量。例如，在Sass中定义...

CSS—vw移动端适配

雷雨天的雷胖子

12-29

586

目录一、概述二、详解一、概述在PC端，视口是指浏览器的可视区域。在移动端，视口（viewport）分为三种，其一布局视口，其二视觉视口，其三理想视口。视口单位是CSS3新引入的概念，其中的视口是指PC端浏览器的可视区域和移动端的布局视口。视口单位如下所示。 (1) vw 相对于视口的宽度, 视口宽度是100vw, 1vw = 视口宽度的1% (2) vh 相对于视口...

移动端适配REM、vw、vh、媒体查询@media以及flexible.js的作用

NewHouser的博客

01-29

904

在使用rem适配移动端的时候的时候，根字号的取值有一定的讲究，尽量不能像上述代码一样随便写成20、30px，而是将视口宽度等分，为了便于计算，通常将宽度等分为10份，例如：iPhone SE的视口宽度为375px，则根字号设置为37.5px（375/10）适配的网页效果就是根据移动设备的屏幕大小实现网页元素的等比缩放。

rem+vw简单适配

atu1111的博客

07-28

416

rem+vw简单适配什么是vw和vh? vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 1.设置meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-s

vw vh vm

Jana Jing的分享

03-15

3403

1、vw css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 2、vh css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。 ...

vm媒体适配

weixin_65692463的博客

10-11

219

响应式原理:就是通过媒体查询检测屏幕宽度,让子盒子的宽度发生变化,改变子盒子排列方式

rem + vw 移动端适配

weixin_50643343的博客

10-22

868

vw和vh也是一个动态单位，他们相对的是一个网页可视窗口的单位；

前端移动端适配（rem,vw）

m0_45421315的博客

07-04

587

1.开启理想视口 2.计算根节点字体公式根节点字体 = （视口宽度*100）/设计稿宽度样式尺寸 = 设计值/100 二、rem方案二（搜狐，唯品会的移动端方案) 1.开启理想视口 2.计算根节点字体公式根节点字体 = 视口宽度/10 样式尺寸 = 设计值/（设计稿宽度/10）三、vw适配样式尺寸 = （设计稿的宽度/视口宽度）*100...

二十一、vm 适配

gaoya7305的博客

07-19

220

这样扩大，通过看computed 如果正常显示了我们写的font-size，就表示当前定义的font-size正确。写了style后，看真实生效的样式要看computed,调试会常用到，调试面板的 styles 只能看代码去设置的样式。确定倍数后，如这里的40倍，即1rem = 40px，后面再在设计图中测出元素的width,height后除以 40，就得到rem值了。/* 此时这里的1rem = 100px;1 rem = 1 html的字体大小（1个html的font-size）

【前端】移动适配：rem和vw/vh

m0_64538862的博客

03-13

2038

1.移动适配，rem，rem解决方案，Less，less注释规范，less运算，less嵌套写法，less中的变量，导入.less文件，导出.less文件，vw/vh

vue 中 vm 适配 - 最完美方案（亲测）

DJ老邓的博客

12-30

1573

1. 安装依赖 npm install postcss-px-to-viewport -D 2. 在根目录下新建 .postcssrc.js 文件 .postcssrc.js 文件修改如下： module.exports = { plugins: { autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] }