移动web之em和rem

版权声明:本文为博主原创文章,未经博主允许不得转载!转载请注明出处。 https://blog.csdn.net/lunhui1994_/article/details/53326768

px

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

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

iPhone所说的像素是物理像素

  1. px :CSS pixels 逻辑像素,浏览器使用的抽象单位,根据设备的不同可大可小。
  2. dp,pt:divice independent pixels 设备无关像素,就是物理像素是不会改变的。
  3. 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>
阅读更多
换一批

没有更多推荐了,返回首页