移动端项目vw单位，px-to-vw插件

最新推荐文章于 2024-04-28 23:27:12 发布
VIP文章 最新推荐文章于 2024-04-28 23:27:12 发布
阅读量3.7k 收藏 4
点赞数
分类专栏： web前端 文章标签： vscode ide 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angrynouse/article/details/126446434
版权

px单位转化为vw单位

1. vw单位(移动端使用)

换算公式：
1vw = 设计稿宽度px / 100
1vh = 设计稿高度px / 100

eg:
1vw = 960px/100 = 9.6px
1vh = 600px/100 = 6px

2. 扩展插件安装

在vscode的扩展中搜索"px-to-vw"，安装
在这里插入图片描述

3. 设置设计稿宽度px单位

在vscode---->设置---->输入px-to-vw---->在里面输入设计稿宽度，即可通过插件进行单位自动转化

最低0.47元/天 解锁文章
况几
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
postcss-px-to-viewport:PostCSS的插件，可从像素单位生成视口单位（vw，vh，vmin，vmax）。 通过一个设计尺寸在不同的显示器上创建可扩展界面的最佳选择
05-02
postcss px到视口 English | 的插件，从像素单位生成视口单位（vw，vh，vmin，vmax）。 演示版 如果您的项目涉及固定宽度，则此脚本将有助于将像素转换为视口单位。 输入 . class { margin : -10 px .5 vh ; padding : 5 vmin 9.5 px 1 px ; border : 3 px solid black; border-bottom-width : 1 px ; font-size : 14 px ; line-height : 20 px ; } . class2 { padding-top : 10 px ; /* px-to-viewport-ignore */ /* px-to-viewport-ignore-next */ padding-bottom : 10 px ;
Vue把px转换单位 px-to-vw-css单位转化插件
nolanElio的博客
05-14 595
1.安装插件 命令行输入:npm install postcss-px-to-viewport --save-dev 安装成功 安装完成后会自动生成一个配置文件 postcss.config.js 写入相关配置 module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport":{ viewportWidth:375,//视窗的宽度 对应的是我们设计稿的宽度 viewportHeight:66
postcsspxtoviewport根据不同属性转vw和vh
qq_33982898的博客
03-16 484
根据不同的属性转vw和vh， 例如： width、margin-left、padding-left ... 转为vw height、margin-top、line-height ... 转为vh 实现这一效果，主要通过插件的propList属性，这里以vite为例
关于移动端的尺寸适配，vscode中支持自动转换的插件
xiecong的博客
01-07 1270
支持自动转换的移动端尺寸适配方案
vue px to vw
yxyy3511的博客
01-30 731
第一步安装： npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S  第二步配置.postcssrc.js： module.exports = {   "plugins": {     "pos...
普歌—智音团队 VScode 使用vw布局插件（实用）
weixin_45498167的博客
07-29 1776
聊一聊移动端页面适配-vw 在vscode上使用插件 vw在移动端屏幕适配是很好用的，但是如果计算起来就会很麻烦，那么下面我讲一下vscode如何使用vw插件 1.在vscode下载 px-to-vw 2.下载完毕后点击左下角的设置搜索px-to-vw， 箭头所指的位置就可以设置我们原型搞的宽度（我这里原型稿是360） 3.使用插件 我们平时写页面都喜欢用px写，那么写完宽度（px）可以按Alt+Z 自动计算成vw的宽度 > div:nth-child(2) { h2 {
vue-cli中使用postcss-px-to-viewport 将px转换成vw
热门推荐
蒲公英芽的博客
04-09 1万+
移动端适配方案中，可以使用vw作为页面中各元素的单位，以此来完成适配效果。下面我们来讲怎样在vue-cli 项目中使用 postcss-px-to-viewport插件。 前言 先来认识一下postcss，postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具。 postcss的作用： 兼容各个内核的浏览器，增强代码的可读性。autoprefixer 插件可以自动获取浏...
vue移动端适配（px转vw）postcss-px-to-viewport配置
农码精神
04-15 3875
安装postcss-px-to-viewport npm install postcss-px-to-viewport 根目录新建postcss.config.js文件 //postcss.config.js文件 module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: ...
vue 移动端开发vw适配方案&rem适配方案 + vant框架 + unocss|tailwindcss
u014632228的博客
07-05 8703
vue 移动端 rem适配方案&vw适配方案
布局：px to vw、vh
snowball的博客
12-08 890
一、背景： vue项目，移动端实现自适应布局 二、选用方案： 视口单位（viewport units）： 三、理解视口单位： 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小，.
vue 行内样式 px 单位 转换为 vw
weixin_45842460的博客
03-09 1176
vue2vue2安装 插件 npm i。
vscode-px-to-viewport-extension
03-27
px到视口 这是Visual Studio Code的扩展，允许您将px转换为视口（vh和vw），将px转换为min（** vw，** vh）并将px转换为rem。 用法 键绑定 Alt + Shift + W：将选定的文本从px转换为vw（视口宽度）。 Alt + Shift + H：将选定的文本从px转换为vh（视口高度）。 Alt + Shift + M：将选定的文本从px转换为min（** vw，** vh）。 Alt + Shift + R：将选定的文本从px转换为rem。 命令（Ctrl + Shift + P） 将px转换为vw：将选定的文本从px转换为vw（视口宽度）。 将px转换为vh：将选定的文本从px转换为vh（视口高度）。 将px转换为min（** vw，** vh）：将所选文本从px转换为min（** vw，** vh）。 设置视口大小：以像素为单位
px2vw一个px单位转成vw单位的VSCode插件
08-12
px2vw 一个 px 单位转成 vw 单位的 VSCode 插件
项目解读VW75174-2018.xls
10-11
VW75174-2018项目解读，适用于大众系列连接器测试
VW-80000-汽车电子电器.pdf
07-27
前 言 说明1：在BT-LAH Modul试验文件中专门规定了针对部件的试验和要求。 说明2：在BT-LAH Modul EMV（电磁兼容性）文件中专门规定了针对部件的EMV（电磁兼容性）试验和要求。 本标准现在的版本是以LV（供货规范）...
【vscode环境配置系列】vscode远程debug配置
最新发布
qiusi0225的博客
04-28 315
launch.json: (注意，debug时可以选择gdb/lldb，lldb需要安装额外插件)安装C/C++, C/C++ Runner。
vscode 、eslint、prettier 的孽缘
qq_42881675的博客
04-27 649
今天在配置一个新项目的时候，被一个新项目搞得头痛。我准备配置 prettier 来格式代码，然后把 prettier 添加到 eslint 规则中，这样控制台就能很好的展示那些代码格式有问题。可是控制台的错误和 vscode 显示的错误一直不一样，无论我怎么格式化代码，不是控制台报错，就是 vscode 显示代码标红。最后捋清楚了，原来是 vscode 的 eslint 插件，热更本地配置时没有完全加载成功。vscode 才能让代码视图和控制台一致。
SPARC VScode EIDE GDB 使用配置
qq_42254853的博客
04-28 821
网上有个“Debugging Guide for GDB and VS Code”的文档可以参考vscode介绍链接可以添加自定义的链接工具上面是标准JTAG的添加的标准模板，"name": "(gdb) Windows 上的 Bash 启动","program": "输入程序名称，例如 ${workspaceFolder}/a.exe",},"description": "为 gdb 启用整齐打印",},"description": "将反汇编风格设置为 Intel",我使用的模板，
VSCode 配置 CMake
北_鱼的博客
04-26 935
CMake是一个跨平台的开源构建工具，用于自动化构建过程。它可以生成标准的构建文件，从而简化了项目的构建和管理过程。
postcss-px-to-viewport 怎么适配pc和移动端
01-20
在使用postcss-px-to-viewport插件进行PC和移动端适配时，你可以按照以下步骤进行操作： 1. 首先，安装postcss-px-to-viewport插件。你可以使用npm命令进行安装： ```shell npm install postcss-px-to-viewport --save-dev ``` 2. 在你的项目中创建一个postcss.config.js文件，并在其中配置postcss-px-to-viewport插件。你可以根据需要调整参数来适配不同的设备。以下是一个示例配置： ```javascript module.exports = { plugins: [ require('postcss-px-to-viewport')({ viewportWidth 750, // 设计稿的宽度 viewportHeight:1334, // 设计稿的高度 unitPrecision: 3, // 转换后的小数位数 viewportUnit: 'vw', // 转换的视口单位 selectorBlackList: ['.ignore'], // 需要忽略的CSS选择器 minPixelValue: 1, // 小于或等于1px不转换 mediaQuery: false // 允许在媒体查询中转换px }) ] } ``` 3. 在你的CSS文件中使用px作为单位进行样式编写。插件会自动将px转换为适配的视口单位。 通过以上步骤，你可以使用postcss-px-to-viewport插件来实现PC和移动端的适配。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值