美文网首页
2019-07-22 rem与px转换

2019-07-22 rem与px转换

作者: ai房子菇凉 | 来源:发表于2019-07-22 19:16 被阅读0次

原文链接:http://caibaojian.com/rem-and-px.html

一:1rem等于多少px呢?·
1rem等于html根元素设定的font-size的px值,假如我们在css里面设定下面的css。

html{font-size:14px}

那么后面的CSS里面的rem值则是以这个14来换算,例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px,同理,假如一个设计稿为宽度42px,高度为35px,则换成成rem,则是42/14=3rem,35/14=2.5rem。

image.png

注意:如果css里面并没有设定html的font-size,则默认浏览器以1rem=16px来换算!
二:为了方便计算,我时常将在<html> 元素中设置font-size值为62.5%; 这也就相当于将<html>中设置font-size:为10px ( 62.5% * 16px=10px )。此时,上面示例图中的值也将变化:


image.png

相关文章

  • 2019-07-22 rem与px转换

    原文链接:http://caibaojian.com/rem-and-px.html 一:1rem等于多少px呢?...

  • 前端项目rem与px转换

    px2rem插件 因为设计师每次给的都是px的图,这里要自己计算转换rem很头疼,所以这里使用插件进行px与rem...

  • px2rem的使用

    px2rem插件 因为设计师每次给的都是px的图,这里要自己计算转换rem很头疼,所以这里使用插件进行px与rem...

  • em与rem区别 em与px转换

    em与rem区别 em与px转换 em与px转换 一般浏览器默认1em=16px,通过设置font-size大小来...

  • 使用postcss-px2rem无法转换vue模板文件中的scs

    移动端的项目使用postcss-px2rem将px转换成rem,使用css时可以转换成rem但使用scss缺无法将...

  • 移动端像素适配插件px2rem的安装与使用

    1. 什么是px2rem px2rem是一个插件,功能是将px自动转换为rem,帮助开发者减少像素间的相互转换计算...

  • vue3.x移动端适配px2rem

    1、什么是px2rem px2rem是一个插件能将px自动转换为rem,以适配各种不同的屏幕尺寸。前端开发可以直接...

  • Visual Studio Code 插件学习

    移动端将像素与rem相互转换,快捷键alt+z px to rem插件右键 扩展设置(extensions set...

  • px2rem-loader保留px不转换为rem

    遇到问题:使用插件px2rem-loader时,有部分样式不想要自动转换成rem解决办法:将px改为PX即可px2...

  • rem与px的转换

    rem是相对于根元素 ,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的...

网友评论

      本文标题:2019-07-22 rem与px转换

      本文链接:https://www.haomeiwen.com/subject/wohglctx.html