二十一、vm 适配

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

gaoya7305

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

阅读量222

点赞数

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

本文链接：https://blog.csdn.net/gaoya7305/article/details/131781647

版权

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

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

目录：
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

233

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

h5中使用rem、vm和vh、@media实现屏幕适配

huangwensu的博客

09-24

1906

1.使用postcss-pxtorem包实现自适应通过npm install postcss-pxtorem安装包，在postcss.config.js中添加配置 postcss: { plugins: { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }, 页面中可以直接使用px单位，会自动编译为rem..

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

vm媒体适配

weixin_65692463的博客

10-11

220

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

rem+vm 适配移动端

thankszmy的博客

12-28

1134

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

1575

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

619

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

939

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

vue vm格式适配移动端

qq_39216281的博客

12-27

471

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

1068

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

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

pingan8787

10-07

2974

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

rem适配方案

qq_35089721的博客

01-08

249

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

2273

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

移动端适配方案

qq_43071951的博客

07-14

531

移动端适配方案

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

逆袭的菜鸟X

11-18

836

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

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

想飞上天和太阳肩并肩

09-01

1928

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

1025

添加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里配置，此...

vhvw适配 vue3

09-17

在vue3中，你可以通过引入全局的scss文件来使用vh和vw适配方案。首先，在assets/css文件下新建一个global.scss文件，定义vw和vh的计算函数。然后，在vue.config.js文件中进行引入，将全局scss文件导入到项目中。这样...