网页尺寸单位
- 百分比(
%
) - 英寸(
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像素
css
像素是一个相对单位。相对不同屏幕,其实际像素大小不同。
我们定义时,是定义其逻辑像素。即该图要用多少个像素来显示。
rem
rem是什么?
rem
(root element
),这个是一个相对的单位。
与em
的差别在于rem
相对的是根节点html
的font-size
,em
相对的是父元素font-size
。
如何优雅地使用rem
动态修改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...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。