scss和less px 转rem

1 首先设置默认字符大小

<script>
            (function() {
                var html = document.documentElement;
                var hWidth = html.getBoundingClientRect().width;//根据屏宽调节大小
                //                console.log( hWidth );
                html.style.fontSize = hWidth / 15 + "px";//设置默认字符大小 25
            })()
        </script>

2 scss写法:

@function t($px) {
    @return $px / 50px * 1rem;
}
p {
    width: t(20px);
}

3 less 写法:

@r:50rem;
p{
    width: 20/@r;
}

4 编译后:

p {
  width: 0.4rem;
}
时间: 2024-07-30 17:50:50

scss和less px 转rem的相关文章

Sublime Text中安装插件来实现px与rem间的换算

1.sublime text2中安装REM-PX插件来实现px与rem间的互换. package control组件安装. 1.1按ctrl+` 调出console 1.2粘贴以下代码到底部命令行并回车: import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp

好用的px转rem的插件

一个CSS的px值转rem值的Sublime Text 3自动完成插件. 下载地址: https://github.com/flashlizi/cssrem 安装 下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录:Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里. 重启Sublime Text. 配置参数

px,em,rem,vh,vw,vmin,vmax的区别

css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输出的物理尺寸时很有用 相对大小: 相对于周围的元素来设置大小 允许用户在浏览器改变文本大小 注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em). 1.px:为像素单位.它是显示屏上显示的每一个小点,为显示的最小单位.它是一个绝对尺寸单位: 2.em:相对

javascript中常见的函数封装 :判断是否是手机,判断是否是微信,获取url地址?后面的具体参数值,毫秒格式化时间,手机端px、rem尺寸转换等

// 判断是否是手机function plat_is_mobile(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match

px em rem 的区别

px:像素,用px设置字体大小,比较精确.但是不能适应浏览器的缩放. em:是一个相对值,根据基准来缩放字体大小.默认1em等于16px,可在body中设置:font-size:62.5%;此时,1em等于10px.em的大小是根据父元素来计算的. rem:相对值,根据基准来缩放字体大小,rem大小根据 根元素html来计算. 注:ie6-8不兼容em,rem,此种情况,可以px和rem一起使用.eg:p{font-size:14px;font-size:0.875rem;}

Sublime Text 插件:px转换为rem

步骤: 下载插件: https://github.com/flashlizi/cssrem 安装插件: 打开:Sublime Text 点击: Preferences 选择: Browse Packages(浏览插件) 进入插件文件夹,将下载完的 插件 cssrem-master.zip 解压到插件文件夹里面 重启 sublimt 参数配置: cssrem-master.zip 解压后是一个cssrem-master文件夹,里面 cssrem.sublime-settings 文件就是参数配置

sublime text3 cssrem 快速px转rem插件

今天试验了下cssrem  在移动端如果需要px->rem非常方便 比较之前我自己用gulp提供的函数unit(70/@base,rem);转方便很多 1.git clone https://github.com/flashlizi/cssrem 2.进入packages目录:Sublime Text -> Preferences -> Browse Packages 3.复制下载的cssrem目录到刚才的packges目录里. 4.重启sublime 配置: 配置参数 参数配置文件:S

sublime text 3将px换算为rem的插件的安装及使用

rem这个单位对于移动端来说是比较强大的,所以这里给大家介绍sublime text 3将px换算为rem的插件的安装及使用,只要安装了这个插件,输入多少px,sublime就会提示相应的rem值,就不用自己去计算了!! 1.首先在这个地址:https://github.com/hyb628/cssrem.git  下载插件 2.将下载的插件将其解压,并且打开sublime,找到:Sublime Text -> Preferences -> Browse Packages,将解压好的文件夹放入

sublime text 3 px转rem

1.在官网下载sublime text 3 下载地址:http://www.sublimetext.com/3 2.安装到pc 3.下载cssrem 下载地址:https://github.com/hyb628/cssrem 4.安装完成打开sublime text 3使用快捷键Ctrl + Shift + p 点击红色区域进入相对应的文件夹 5.找到 Packages 把解压后的 cssrem 或者 cssrem-master 拷贝到 Packages 目录下 6.重启sublime text