css3+rem适配，css rem

rem与px的转换

那么12px=0.75rem，10px=0.625rem。

高度为5rem.则它换算成px为width：42px.height：35px，同理，假如一个设计稿为宽度42px，高度为35px，则换成成rem，则是42/14=3rem，35/14=5rem。

我一般会将设计稿缩小至宽度为320px（切图标时，还是按照原图来切）。在上一步中，1rem为1/10屏幕宽度。因此，px与rem的转化为 1px = 1 / 320 * 10rem。

vw px rem之间的换算 我们假设psd的设计稿是以1920px为标准的。

相关问答

Q1: 移动端高度怎么自适应?

现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。

设计稿尺寸为750 * 1340，移动端rem自适应方案一般分2种 网易做法 整个屏幕为5rem，1rem=100px 淘宝做法 整个屏幕为10rem，1rem=75px 当然也可以转化为px ： rem = 100 ： 1。

第一个遇到的就是网页大小自适应的问题。目前比较常用的方法有：？ 首先要让页面大小铺满屏幕又不能溢出。

Q2: 移动端布局适配(px,em,rem,vh,vw)

所以不管当前元素是任意子节点，一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的，这里的 “em” 和 “rem” 均具有继承性。

常用的布局单位包括像素（ px ），百分比（ % ）， em ， rem ， vw/vh 。

px： 绝对字体大小 em： 基于一个基数来计算出相对字体大小。(移动端用的少) rem： 基于根节点（html）的字体大小来计算。 vw： 可视区宽度单位。1vw等于可视区宽度的百分之一。

rem=325vw可一起结合写等比例缩放布局。px px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em em是相对长度单位。相对于当前对象内文本的字体尺寸。

对于Web开发的求职者而言，也是一个必需要理解清楚的经典问题 _ | Second其实，尺寸（width、height、margin、padding等等）相关的适配，除了使用rem以外，还可以使用CSS3的vh和vw。

本文章只关注如何适配，所以先只谈结论，后面有机会可以讲讲viewport和css像素px中的细节。

Q3: 举例说明css3新增的长度单位的使用方法?

rem：移动端布局，根据根节点字体大小，具体可参考淘宝移动端解决法案，根据设备dpr；em：类似rem，不过是根据父节点字体大小 vw，vh ：viewport height和viewport width。1vw就是viewport width的1%。

vmin和vmax：关于视口高度和宽度的最小值或最大值，vmin等于1/100的视口宽高中的最小值。应用场景：让一个元素始终在屏幕中可见。ch：数字0的宽度ex：当前字体的小写x字母的的高度或者1/2的1em②。

calc()是css3新添加属性，它可以让你使用一个算术表达式来表达长度值，这意味着可以用它来定义p的宽度，并设置margin、padding、border等。

rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？目前除IE8及更早版本外，所有浏览器均已支持rem。对于不支持的浏览器，可以多写一个绝对单位的声明。如此浏览器会忽略rem设定的字体大小。

接下来改成使用em来做实验，外层的文字大小直接从4em开始，可以看到内层的1em文字大小等同于外层4em，随后的逐渐放大。

将你的原来的px数值除以10，然后换上em作为单位； 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。

关于css3+rem适配和css rem的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。