您的位置：首页 > 其它

移动web之em和rem

2016-11-24 22:01 211 查看

px

如iPhone5宣称的分辨率是640*1136，那么一张640*1136的图片按理说应该可以在iPhone5上正常的显示，并完全填充的，但是，真实的情况是，图片只占一部分的空间。如图

如图所示，iPhone5的640*1136的分辨率在模拟器的显示中却是320*568，这是为什么呢？

iPhone所说的像素是物理像素

px ：CSS pixels 逻辑像素，浏览器使用的抽象单位，根据设备的不同可大可小。

dp,pt：divice independent pixels 设备无关像素，就是物理像素是不会改变的。

dpr :devicePixelRatio 设备像素缩放比

他们三个的计算公式就是

1px = （dpr）^2 *dp  ;

这里就是dpr = 2 的时候，即1个px是等于4个dp。（平面上）

所以在x，y方向上的，是抽象像素是物理像素的一半。

接下来是ppi.

ppi: 屏幕每英寸的像素数量，即单位英寸内的像素密度

计算公式（用物理像素计算）

ppi = √1136²+640² / 4 = 326 ppi

ppi越高，那么图像就越清晰，320ppi以上的都属于高清屏了

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

即假如你在当前元素中设置的font-size是14px，那么1em在这个元素内就表示14px，适用于移动端的布局，但是由于em没有一个固定的标准，他会根据盒子当前设置的字体大小来作为标尺。当盒子嵌套过深的时候，很容易搞混em的基准。

rem

rem则是只以html的字号为标准，可以根据不同的屏幕大小，按照一定的比例来布局。结合媒体查询，不同的屏幕有不同标尺。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>适配方案三</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #F7F7F7;
}

/*公司开发，按着UI稿件进行网页布局*/

/* 640 和 750 并存状态 */

/*公式*/

/*1、将UI图（假设640px）分成若干份（如20份）*/
/*2、UI图宽度（640px） / 若干份（20份）= 基数（32）*/

/* 每份 32px */
/* 问16像素占多份？16 / 32 = 0.5份 */

/*3、结合媒体查询，检测屏幕宽度（layout viewport）*/
/*4、layout viewport 宽度 / 若干份（20份）= font-size*/

/* 每份 font-size */
/* 0.5份 * font-size = 在不同设备下的实际大小 */

/*常见屏幕尺寸 320、360、375、400、414*/

/*分成20份*/

@media only screen and (width: 320px) {
html {
font-size: 16px;
}
}

@media only screen and (width: 360px) {
html {
font-size: 18px;
}
}

@media only screen and (width: 375px) {
html {
font-size: 18.75px;
}
}

@media only screen and (width: 400px) {
html {
font-size: 20px;
}
}

@media only screen and (width: 412px) {
html {
font-size: 20.6px;
}
}

@media only screen and (width: 414px) {
html {
font-size: 20.7px;
}
}

.box {
width: 5rem;
height: 5rem;
background-color: pink;
}

</style>
</head>
<body>
<div class="box">
</div>

<script>

var viewport = document.documentElement;

var width = viewport.clientWidth;

var fontSize = width / 20;

viewport.style.fontSize = fontSize;

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： rem em px 移动布局 web

相关文章推荐

新的分享

章节导航