rem and em

Mobile pixel

Why use mobile adaption:
1) With the development of the times, accessing PC pages on the mobile terminal has gradually become
more and more normal. 2) The size of mobile phones is becoming more and more
fragmented. Fragmentation: There are many varieties and diverse

Mobile test methods:
1) The virtual machine provided by Google Chrome
2) The computer and mobile phone are in the same local area network, scan the QR code provided by the compiler to view it on the mobile phone
3) Build a local server to establish access

 <div class="box">
        <!-- rem -->
        <div class="main"></div>
        <!-- em -->
        <div class="min_box"></div>
    </div>
    <script>
        //一些浏览器中，无法获取到documentElement,所以去获取body
        var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

        //获取html 变雨下面设置html的字体大小
        var html = document.querySelector("html");
        //设置根元素的字体大小
        html.style.fontSize = htmlWidth / 20 + 'px';
    </script>


*em是一个相对的距离单位*
参考父级的font-size
==em通过自身父级的字体大小会转换px
公式   实际px等于1em*父级的字体大小
优点：方便我们设置段落间隙
缺点：当嵌套多层的时候，需要自己去计算==
### em和rem最大区别
>Em 和 rem 单位之间的区别是浏览器根据谁来转化成px值 理解这种差异是决定何时使用哪个单元的关键。
>em的特点：
                 >                 em的值不是固定的
                                  em会继承父级元素的字体大小
    
    
    ### em   当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。

### rem
root-rem根元素的em值，html的字体大小

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。
>rem的计算公式
>屏幕的宽度（设计稿）/ 份数（20）=1rem的具体大小
>元素的尺寸 / 1rem的值 = 实际的rem值（要写在元素样式上的值）

//In some browsers, documentElement cannot be obtained, so get body
var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

    //获取html 变雨下面设置html的字体大小
    var html = document.querySelector("html");
    //设置根元素的字体大小
    html.style.fontSize = htmlWidth / 20 +'px';
    ` ` `
    <!-- 三种视口：
  1） 布局视口：布局视口一般都是浏览器厂商给的一个固定值，布局视口是看不见的，浏览器厂商设置的一个固定值，如980px，并将980px的内容缩放到手机屏内。
  2） 视觉视口：浏览器可视区域的大小，也就是用户可以通过设备宽度看到的内容
  3） 理想视口：布局视口虽然解决了移动端查看pc端网页的问题，但是完全忽略了手机本身的尺寸。
               所以苹果引入了理想视口，它对设备来说是最理想的布局视口，
               用户不需要对页面进行缩放就能完美的显示整个页面。
               最简单的做法就是使布局视口宽度改成屏幕的宽度。
     两个像素和一个像素比：
        1)css像素(独立像素,逻辑像素) : 在CSS、JS中使用的一个长度单位。单位px
                                   注：在pc端1物理像素等于1px，但是移动端1物理像素不一定等于1px
        2)物理像素：屏幕的物理像素，又被称为设备像素，他是显示设备中一个最微小的物理部件。
                                  任何设备屏幕的物理像素出厂时就确定了，且固定不变的
         设备像素比： 简称为dpr， 它是物理像素和独立像素的对应关系(也就是比例)
         备注：判断是否为高清时， 看一下dpr的值是否大于1。 一般情况下dpr为整数，
                                但是一些安卓的机型不为整数(奇葩)
                               通过：window.devicePixelRatio获得。
-->

Mobile pixel

Guess you like