sass px转vw

2024-09-05 02:32
文章标签 sass px vw

本文主要是介绍sass px转vw,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如今移动端对 vw/vh 的尺寸单位基本兼容,对代码有洁癖的开发者们不想用js去计算rem的值了。

网上有许多有关在 sass 中 px转rem的文章了,今天小编带来一个简单实用的 px转vw的方法

sass方法源码

/*750:设计稿宽度$px:元素在设计稿上的宽度
*/@function px2vw($px) {@return $px/750*100vw;
}

使用方式

由上图所示,750px的设计稿上有一个375px的元素,通过计算,就是50vw的值啦。这与使用rem和rpx这类单位是一样的。

小编不建议对设计稿上小于5px的元素动态计算,意义不大。特别是1px的线,不能通过该方法计算,因为计算后的结果是小于 1px,在理论上这不是一个合理的值,有些开发者也会写1rpx,这其实也是不对的。

若你仍然喜欢用rem,小编给你rem全套服务,点击下方连接获取:

rem兼容:https://mydarling.gitee.io/resource/author/mobileAdapt.html

作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com

公众号:web-7258,本文原创,著作权归作者所有,转载请注明原链接及出处。

更多精彩文章,请扫下方二维码关注我的公众号

这篇关于sass px转vw的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1137719

相关文章

【解决bug之路】npm install node-sass(^4.14.1)连环报错解决!!!(Windows)

有关node-sass的深入分析可参考:又报gyp ERR!为什么有那么多人被node-sass 坑过? 主要有如下三方面错误,请自查: 1.node,npm版本需与node-sass版本匹配,像node-sass(^4.14.1)就得node 14.x版本才可以,node 16不行 gyp ERR! build error15 gyp ERR! stack Error: `

【vue使用Sass报错】启动项目报错 Syntax Error: SassError: expected selector

出现的问题 新项目启动的时候,提示: Syntax Error: SassError: expected selector 看了一下发现是sass使用样式穿透/deep/报的错 /deep/其实是已经过期的写法,某个版本之后就不支持了 但是我同事并没有出现同样的问题,不知道是为啥,也有可能是电脑(mac)的原因 解决办法 将 /deep/更换为::v-deep 但是这个项目是多人协作的,有

微信小程序rpx和px关系

微信小程序中使用了自定义的尺寸单位 rpx(responsive pixel),这是一种相对单位,用于适配不同屏幕尺寸的设备。rpx 的设计目的是为了让开发者能够更容易地写出跨屏幕尺寸的应用,而不需要为每个屏幕尺寸单独写一套样式。 rpx 和 px 的换算 在微信小程序中,屏幕基准宽度为 750rpx。也就是说,当屏幕宽度为 750rpx 时,1rpx 等于 1/750 屏幕宽度。实际的物理像

小白Sass教程---通过实例学Sass--第五讲--scss文件导入及Sass样式优先级测试

一、sass提供导入机制,可以将页面的共用较为通用的scss提取出来,这样方便维护,其他页面按需导入相关的scss文件,避免了所有的样式都在一个样式文件中,一个样式文件较为繁重难以维护。   @import "../sass/lesson4"; 这样就导入了lesson4这个scss文件,可以使用其中的样式。   二、测试一下样式应用的优先级 1、本文件下:嵌套结构、非嵌套结构 在本

小白Sass教程---通过实例学Sass--第四讲--属性嵌套

CSS规则在sass中可以进行嵌套,css属性也可以进行嵌套,属性嵌套的规则是: 有中横线的属性可以拆解嵌套,以中横线为界限进行拆解,依次嵌套 废话不多说,直接上代码: .lesson3-demo2{.box{height: 100px;width: 800px;padding: {top: 20px;left: 30px;}border: {left: 5px solid #3da7f5

认识Sass和Compass

第一章 Sass和Compass让样式表重焕青春 // 内容概要// 开始学习Sass和动态样式表// 用Sass更高效地写样式表// Compass简介// 用Compass迎接工程实践中的样式挑战 1.2.1 通过变量来复用属性值 1 声明变量:$blue:#1875e7;2 调用变量:.blue { color:$blue; } 1.2.2 通过嵌套来快速写出多层级的选择器

在实战中使用Sass和Compass

第三章 无需计算玩转CSS网格布局 3.1 网格布局介绍 3.2 使用网格布局 3.2.1 术语 1 术语名 定义 是否涉及HTML标签2 列 内容度量的垂直单位 否3 容器 构成一个网格布局的HTML元素 是4 槽

Sass和Compass入门

一.前言 1.Sass是什么?   Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者,为了能够确定多栏布局中某一栏的宽度,你需要使用计算像素值软件才能搞定。  Sass引入了一些新的概念如,变量,混合,嵌套和选择器继承.Sass 生成良好格式化的 CSS 代码,易于组织和

Cannot find module 'gulp-sass'

当我升级node安装包的时候,再次启动项目,重新安装的时候。出现 Cannot find module ‘gulp-sass’ 这个错误,原来是需要先安装npm install –save-dev node-sass,然后再次安装npm install –save-dev gulp-sass 就可以了