二十一、vm 适配

最新推荐文章于 2024-06-15 15:51:59 发布

gaoya7305

最新推荐文章于 2024-06-15 15:51:59 发布

阅读量260

点赞数

分类专栏： html+css 文章标签： vm适配 rem

本文链接：https://blog.youkuaiyun.com/gaoya7305/article/details/131781647

版权

本文介绍了在不使用JS参与的情况下，如何利用vw单位进行移动端适配，以解决使用vm值进行适配的不准确性和复杂性。通过一个48px x 35px图标的例子，详细阐述了vw的计算方法，包括调试技巧和如何根据计算结果调整html的font-size来达到预期的适配效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录：
1. 基础准备
2. 详解

一、基础准备

目的：前面我们通过0.1333vm x 对应的设计图像素，找到vm值，这个方法不准确，且操作复杂，有没有什么优化方法呢？
解决：vw的适配（在js不参与的情况下，用vw是最好的适配手段）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

gaoya7305

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3 数据大屏处理1（vh-vm-rem）2（scale）数据大屏适配

jieweiwujie的博客

03-13

581

1 使用vh和vm 需要计算。2使用scale缩放原理。

vm媒体适配

weixin_65692463的博客

10-11

262

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

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

rem+vm 适配移动端

thankszmy的博客

12-28

1173

html { height: 100%; font-size: 50px; // 向下兼容不止vw时候写死font-size font-size: 13.33333333vw; // 7.5rem === 100vw margin: 0 auto; } @media (min-width: 560px) { // pc兼容 html,body { font-si...

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

DJ老邓的博客

12-30

1633

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'] }

rem vm 自适应屏幕大小布局

RenBaiLi的博客

09-05

673

一丶 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...

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

m0_67391401的博客

03-17

1031

移动适配 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 {

如何基于viewport vm适配移动端页面

01-18

作为一个小前端，经常要和H5打交道，这就面临着不同终端的适配问题。 Flexible方案通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值，给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的...

移动端+pc端自适应适配解决方案

06-29

适用于前端H5 pc端的适自创适配方案，有效解决各个尺寸适配，根据浏览器可视区域自适应元素，使用方法：将资源下载下来，放入单独js文件中，独立写成一个全局方法，如果是vue项目就在main.js中引入。如果是原生js...

Plug规范：简化Web应用程序模块组合与Erlang VM适配

标题指出的是一个关于Web应用程序开发中的重要概念——“Plug”，它定义了Web应用程序之间可组合模块的规范，并提供了Erlang虚拟机（VM）中不同Web服务器的连接适配器功能。这一规范和便利性的提出，旨在简化Web应用...

vue vm格式适配移动端

qq_39216281的博客

12-27

498

npm install postcss-px-to-viewport --save-dev "postcss": { "plugins": { "autoprefixer": {}, "postcss-px-to-viewport": { "viewportWidth": 375, "unitPrecision": 3, "viewport...

长度单位vw vh vm手机屏幕适配及应用场景

weixin_33767813的博客

03-17

1110

为什么80%的码农都做不了架构师？>>> ...

【CSS】1827- 一次搞懂数据大屏适配方案 (vw vh、rem、scale)

pingan8787

10-07

3659

作者：懒惰的智慧https://juejin.cn/post/7163932925955112996前言当接到可视化大屏需求时，你是否会有以下疑问????如何做一款定制化的数据大屏？发可视化数据大屏如何做自适应？vmvh、rem、scale到底哪种比较好？时间不够，有没有偷懒的方法？最近在公司开发了一个可视化大屏，开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：大屏之关键-前期的自适应适...

rem适配方案

qq_35089721的博客

01-08

278

http://ailongmiao.com/read/90.html @media only screen and (min-width: 320px) { html { font-size: 13.65px; } } @media only screen and (min-width: 360px) { html { font-...

网页适配（移动端网页布局方案）

2401_84341495的博客

06-15

2961

原因是在dpr为2或者更高的屏幕上，1px其实占据的真实物理像素为2px或更多，设计师的本意肯定是1px就是1px，所以就会出现1px的问题。可以采用rem单位去制作1px的边框，虽然可以一定程序上避免1px的问题，但是会出现不精准的情况，这就需要跟设计师沟通看这个问题是否可以接受。，使用flexible适配方案可以避免iphone端1px的问题，因为flexible方案考虑了iphone端的dpr问题，但是安卓端是没有考虑dpr的，所以安卓端1px问题根据需求需要处理;

移动端适配方案

qq_43071951的博客

07-14

581

移动端适配方案

数据大屏vm vh适配解决方案

逆袭的菜鸟X

11-18

894

rem弹性布局，在html文件头部放入一大段压缩过的js代码很难受，但vw能让你的代码更纯粹.弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；vw单位兼容性比rem稍差，ios8、安卓4.4及以上才完全支持。按照设计稿的尺寸，将px按比例计算转为vw和vh，转换公式如下。rem的优点：移动端rem布局比vw主流的原因兼容性。弊端之二：html文件头部需插入一段js代码。

vue cli3中移动端适配方案——vw

想飞上天和太阳肩并肩

09-01

2055

vm是新出的移动端适配方案，提到vm我们就不得不说rem，我们首先来看下两者的区别 rem布局方案：规定750px 尺寸下，我们设置跟字体html的font-size: 100px, 即1rem = 100px 这样750px 尺寸的psd图片上，量得的宽度/高度，如150px, 写到css中的时候，需要经过换算 150px/100px = 1.5rem 我们随着设备尺寸变化，按比例750px/100px 修改html的根字体大小 rem随着跟字体变化，则页面上所有用rem单位的元素大小也跟着变化

React移动端vm适配方案

weixin_34292287的博客

04-05

1062

添加postcss插件 npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano 复制代码在config-overrides.js里引入（也可以使用eject在webpack.config.js里配置，此...

Vue前端适配自定义vh和vw方案

qq_41497443的博客

10-19

3774

Vue前端适配自定义vh和vw方案话不多说，直接上代码 1、在assets/css文件下新建global.scss，代码如下：以适配屏幕为1920x1080为例，其他尺寸根据具体需求修改即可。 $vm_base: 1920; $vh_base: 1080; // 计算vw @function vw($px) { @return ($px / $vm_base) * 100vw; } // 计算vh @function vh($px) { @return ($px / $vh_base) * 10

vm,vh适配不变形

最新发布

03-29

<think>好的，我现在需要解决用户关于使用VM和VH单位进行屏幕适配的问题，以避免元素变形。用户还提到最佳实践和CSS使用方法，所以我需要详细解释这些单位的概念、如何应用以及注意事项。首先，我应该回顾一下什么是vw和vh。vw代表视口宽度的1%，vh是视口高度的1%。还有vmin和vmax，这两个可能也需要提到，因为它们与视口的最小和最大尺寸有关。用户可能对这几个单位不太清楚，需要区分开。接下来，用户想避免变形，所以需要解释如何正确使用这些单位来保持元素的宽高比例。例如，使用vw设置宽度，vh设置高度，或者结合使用百分比和视口单位。可能需要提到保持宽高比的方法，比如padding-top技巧，或者使用calc()函数来结合不同的单位。然后要考虑最佳实践。比如，如何与媒体查询结合使用，或者如何设置根字体大小以便与rem单位配合使用。可能还需要提到在移动端和桌面端的适配差异，以及如何处理字体大小，避免文字过小或过大。还需要注意的问题包括：视口单位的兼容性，虽然现在大部分现代浏览器都支持，但某些旧版本可能需要考虑回退方案。此外，使用视口单位时，滚动条的存在可能会影响视口宽度的计算，特别是在Windows系统下，滚动条会占据视口宽度，导致布局偏移。如何处理这种情况，比如使用overflow: auto来避免固定滚动条占据空间。另外，用户提到的flexible方案是通过JS模拟vw，但现在vw已经得到广泛支持，可以直接使用。所以可能比较两种方法的优劣，指出现在更推荐原生vw单位，减少JS依赖，提升性能。实际应用场景方面，可能需要举几个例子，比如全屏背景、响应式排版、固定宽高比的容器（如视频播放器）等。通过这些例子展示如何具体应用vw和vh。最后，总结最佳实践步骤，让用户能一步步操作。同时，生成相关问题，帮助用户深入理解，比如如何处理字体适配、结合媒体查询的使用，以及如何解决滚动条问题等。需要确保回答结构清晰，分点说明，并包含代码示例。同时，引用用户提供的参考内容，比如引用flexible方案和设置根字体大小的原理，以增强回答的可信度。</think>### 使用 vw/vh 单位实现屏幕适配不变形的方法 #### 一、核心原理 1. **视口单位定义** - $1\text{vw} = 1\%$ **视口宽度**，$1\text{vh} = 1\%$ **视口高度** - $1\text{vmin} = 1\%$ **视口较小边**，$1\text{vmax} = 1\%$ **视口较大边** 这些单位直接关联设备屏幕尺寸，可实现元素按比例缩放[^2]。 2. **避免变形的关键** 通过**统一维度计算**或**锁定宽高比**实现适配。例如： ```css .box { width: 50vw; /* 视口宽度一半 */ height: calc(50vw * 0.75); /* 固定宽高比 4:3 */ } ``` #### 二、最佳实践步骤 1. **基础布局设置** ```css html { font-size: 0.625vw; /* 假设设计稿宽度为 1600px，则 10px = 1rem */ } .element { width: 20rem; /* 转换为 200px (20 * 10px) */ padding: 2vh 3vw; /* 混合使用单位 */ } ``` 2. **全屏容器实现** ```css .fullscreen-section { width: 100vw; height: 100vh; /* 完全覆盖可视区域 */ position: relative; } ``` 3. **响应式字体控制** ```css h1 { font-size: clamp(2rem, 4vw, 3rem); /* 最小2rem，最大3rem，按4vw动态变化 */ } ``` 4. **固定宽高比容器** ```css .video-container { width: 70vw; height: calc(70vw * 9/16); /* 16:9 视频比例 */ } ``` #### 三、注意事项 1. **滚动条问题处理** Windows 系统滚动条默认占用视口宽度，需添加： ```css html { overflow-x: hidden; margin-left: calc(100vw - 100%); } ``` 2. **移动端兼容方案** ```css @media (max-width: 768px) { .element { width: 90vw; /* 改用更保守的宽度 */ height: auto; /* 解除高度锁定 */ } } ``` 3. **与 rem 的配合** 结合 `clamp()` 函数实现动态根字号： ```css html { font-size: clamp(12px, 1vw + 6px, 16px); } ``` #### 四、完整代码示例 ```css /* 基准样式 */ :root { --safe-area-padding: max(5vh, 2rem); } .container { width: min(90vw, 1200px); /* 限制最大宽度 */ margin: 0 auto; padding: var(--safe-area-padding); } .responsive-image { width: 100%; height: 40vmin; /* 始终取视口较小边的40% */ object-fit: cover; } ```