px妙转rem

verano 发布于2019-04-23 11:47 / 1406人阅读

摘要：像素，相对长度单位，相对于显示器屏幕的分辨率而言其实我个人认为可以理解为固定单位这是个前端中的新成员，是中新增的一个相对单位。

px：像素，相对长度单位，相对于显示器屏幕的分辨率而言（其实我个人认为可以理解为固定单位）；

rem：这是个web前端中的新成员，是CSS3中新增的一个相对单位。相对的只是html根元素；

1、设定两个盒子（举例）

</>复制代码 
1     
2     <div class="box1">div>
3     <div class="box2">div>

2、简单设定样式（px形式）

</>复制代码 
 1     /* 分别以 px 为单位为两个设置两个简单样式 */
 2     .box1 {
 3         width: 50px;
 4         height: 100px;
 5         background-color: chartreuse;
 6     }
 7     .box2 {
 8         width: 200px;
 9         height: 125px;
10         background-color: aqua;
11     }

3、简单设定样式（px转rem形式）

</>复制代码 
 1      /* 指定相对根元素的相对值 
 2        * 一般css样式初始化时候指定
 3        * 值的指定一般是 50px 或 100px
 4        * 原因：便于计算
 5        * 计算公式：px / 相对值 = rem
 6        */
 7         html {
 8             /* 我这里指定 100px */
 9             font-size: 100px
10         }
11         .box1 {
12             width: .5rem;
13             height: 1rem;
14             background-color: chartreuse;
15         }
16         .box2 {
17             width: 2rem;
18             height: 1.25rem;
19             background-color: aqua;
20         }

4、两种形式显示基本一样

云服务器 GPU云服务器 px2rem px rem html 0.1px

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1164.html

Stylus插件开发教程

摘要：你还需安装一个依赖，告诉使用者，你这个是基于哪个版本开发的，当然你可以不安装这个依赖，那只能自己用了。开发调试在根目录中运行在本机全局为做一个软链接，如果你移动了目录你得重新做软链接。因为你在前面添加了文件事实上导入的文件是。由于Stylus的强大，它支持SCSS LESS 灵活的书写方式，然后它不用像SCSS安装Ruby，不是特别出名，流行的工具没有使用它，只是在小的圈子里面挺火滴...

cyqian 2019-08-30 12:57 评论0 收藏0
最简单的px转rem预处理方法

摘要：如果你使用作为你的预处理的工具，那么是你使用最简单处理转工具，使用方法如此简单首先安装工具然后只要在你的文件引用就可以里工具将编译成并预处理将转换成上面内容输出为选择使用和设置初始值默认你可以设置它。 showImg(https://segmentfault.com/img/remote/1460000004847061); showImg(https://segmentfault.c...

Cristic 2019-08-30 12:57 评论0 收藏0
【基础】EM 还是 REM？这是一个问题！

摘要：但问题是究竟该用还是呢关于这个问题一直存在比较大的争议。上述现象的出现，是因为是相对于当前元素字体的大小。什么是表示，它是相对于根元素的长度单位。还是在项目开发中究竟是选用还是一直以来争议不断。这就是前述规则中的第一条规则。简言应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM，根据设备尺寸缩放显示元素的大小。这就使得组...

lk20150415 2019-08-29 15:07 评论0 收藏0
WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

摘要：页面实现等比例缩放自适应通过和实现一和简介是相对长度单位，是指相对于根元素即元素字号大小的倍数。当过大时，以其为基准的数值会出现精度丢失，造成较大的误差。此时，单位会以为基准进行计算，页面就会整个跑偏。 WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现一、rem 和 vw 简介 1. rem rem 是相对长度单位，是指相对于根元素(即html元素)font-size...

pubdreamcc 2019-08-30 10:59 评论0 收藏0
WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

摘要：页面实现等比例缩放自适应通过和实现一和简介是相对长度单位，是指相对于根元素即元素字号大小的倍数。当过大时，以其为基准的数值会出现精度丢失，造成较大的误差。此时，单位会以为基准进行计算，页面就会整个跑偏。 WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现一、rem 和 vw 简介 1. rem rem 是相对长度单位，是指相对于根元素(即html元素)font-size...

khs1994 2019-08-02 15:09 评论0 收藏0