摘要：像素像素是一个相对单位。相对不同屏幕，其实际像素大小不同。解决方案直接使用实现的终端适配有兴趣的小伙伴可以看下的解决方案使用实现手淘页面的终端适配地址移动端适配单位的坑你知道多少关于移动端布局的一些总结
网页尺寸单位
百分比（%）
英寸（in）
厘米（cm）
毫米（mm）
磅数（pt）
12 点活字（pc）
字母高度一半（ex）
父级字体（em）
像素（px）
根元素字体（rem）
相对于视窗的宽度（vw）
相对于视窗的高度（vh）
相对于视口的宽度或高度中较大的那个（vmax）
相对于视口的宽度或高度中较小的那个（vmin）
使用前可以在 http://caniuse.com/ 查看各个单位的浏览器兼容性设备像素
ppi(pixels per inch)设备像素表示每英寸所拥有的像素(pixel)数目，数值越高，代表屏幕能以更高的密度显示图像。
计算公式：ppi=像素数量/物理尺寸（英寸数）
设备独立像素dips(device-independent pixels)设备独立像素。
我们希望不同屏幕显示图片的大小要一致，我们要计算图片缩放比例。
计算公式：图片逻辑像素大小px1 / 图片缩放后实际像素大小px2 = 设备像素dp / 设备独立像素dips px2 = px1 * (dp / dips) px2 = px1 * dpr设备像素比
dpr(devicePixelRatio)是设备像素dp和设备独立像素dips的比例。
dpr = dp / dips
css像素是一个相对单位。相对不同屏幕，其实际像素大小不同。
我们定义时，是定义其逻辑像素。即该图要用多少个像素来显示。
rem (root element)，这个是一个相对的单位。
与em的差别在于rem相对的是根节点html的font-size,em相对的是父元素font-size。
动态修改html的font-size，那么使用rem的元素的对应单位实际像素也会相应的改变，所以我们只要写一份css就可以适配所有手机的屏幕了。虽然rem在某些浏览器下面不够精准，但那也只是少数，如果需要非常精准的适配，那么可以使用js来计算html的font-size。
现在设计师给的移动端视觉稿，一般都是按照750px来设计的。当我们拿到视觉稿时，首先把视觉稿的宽度转换为rem，我们并不需要考虑设备的分辨率，只需要按照
计算公式：视觉稿宽度 = font-size * rem
这个公式来计算就好了。视觉稿的宽度是我们以750px为例，font-size 与 rem 是两个变量，我们只需要它们的乘积等于750即可。我们采用 定一变一的方式，假定rem=7.5，那么初始值font-size就必须等于 100px，我们就可以根据需要适配的屏幕宽度来等比例调整font-size。那么如果我们750px的视觉稿需要显示成640px呢，我们只需要把font-size对应的缩小就可以了。其他的各种的屏幕，只需要等比例缩放就好了。
js+sass计算方案JS动态设置font-size（简单demo，如有需要最好加上DomContentLoaded和orientationchange的监听）：
fnResize();
window.addEventListener("resize", function() {
fnResize()
}, false);
function fnResize(){
var docWidth = document.documentElement.clientWidth,
body = document.getElementsByTagName("html")[0];
body.style.fontSize = docWidth / 32 + "px";
}
sass:
@function rem($px){
@return $px*(1/20)*1rem;
}
.ty_con{
minwidth: rem(300); /* 15rem */
}
rem问题及解决方案
问题：
部分安卓机rem计算出来的font-size总是要比预期要大一些或者小一些：华为，魅族......（小数保留问题）这样会导致最后的计算是不准确的。
解决方案1:
在css的使用上宽度布局尽量使用百分比，flex和box-sizing来做，减少宽度计算误差产生的问题。
icon雪碧图的图标之间留白，在写宽度的时候多写几像素使图标居中。
解决方案2:
在每次计算完页面的fontSize后，对某个实际元素的大小进行判断，如果对比原来的比例有0.2以上的出入，那就用这个比例去重新设置页面的fontSize。如果是正常情况，就不会执行页面fontSize重新这一步。至此，问题也算是解决了。
解决方案3:
直接使用Flexible实现H5的终端适配
有兴趣的小伙伴可以看下Flexible的解决方案：
使用Flexible实现手淘H5页面的终端适配：http://www.w3cplus.com/mobile...
github地址：https://github.com/amfe/lib-f...
移动端Web适配单位rem的坑你知道多少 ：http://www.jianshu.com/p/8300...
关于移动端 rem 布局的一些总结： https://segmentfault.com/a/11...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113321.html
摘要：当明确规定根元素的时，单位以该属性的初始值作参照。适配具体实现方案设计稿尺寸宽度为，如果设计稿是，下边会自动计算的值比如，具体的尺寸不用调整例如，不用调整，这是一个比例大小，对应的元素大小值会根据新的比如等于改变，从而按照比例适配。 前言 根据 W3C 规范中对 1rem 的定义： 1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem...
摘要：当明确规定根元素的时，单位以该属性的初始值作参照。适配具体实现方案设计稿尺寸宽度为，如果设计稿是，下边会自动计算的值比如，具体的尺寸不用调整例如，不用调整，这是一个比例大小，对应的元素大小值会根据新的比如等于改变，从而按照比例适配。 前言 根据 W3C 规范中对 1rem 的定义： 1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem...
摘要：网页单位绝对单位，代表屏幕中每个点。相对单位，每个元素透过倍数乘以根元素的值。和就是固定百分比为单位，为父层的，为父层的。 对于绘图和印刷而言，单位相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。 网页和印刷的单位若要把单位做区隔，最简...
摘要：很多人会疑惑为什么有了之后还要使用，而且使用起来相对于来讲比较麻烦。如下图接下来，按住键并连续按减号键，对页面不断进行缩小。造成这种现象的主要原因是是相对大小，使用时对页面进放大或缩小不会造成太大的影响。1、为什么使用em em也是css中的一种单位，和px类似。很多人会疑惑为什么有了px之后还要使用em，而且em使用起来相对于px来讲比较麻烦。 em主要是应用于弹性布局，下面给出一个小栗子...
阅读 1069·2021-11-24 09:39
阅读 1923·2021-09-30 09:47
阅读 1117·2021-09-22 15:15
阅读 2127·2021-09-10 10:51
阅读 1695·2019-08-30 15:55
阅读 2844·2019-08-30 11:06
阅读 784·2019-08-30 10:53
阅读 730·2019-08-29 17:26
