px.em单位 rem适配

px（像素）单位

px:

    一个盒子是100px * 100px  px指的是逻辑像素，也叫css像素
    在适配时，使用px作为单位并不合适。

像素是图像的基本采样单位，它不是一个确定的物理量，也不是一个具体的点或小方块（尽管可以用点或小方块来呈现），而是一个抽象概念。

不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.3mm之间。

注意，我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示

原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

一般来说，px就是对应设备的物理像素，然而如果输出设备的解析度与电脑显示器大不相同，输出效果就会有问题。 

---

em:
   

    指的是一个汉字的宽度，2em表示两个汉字的宽度
    1em = 1个font-size的大小
    如：font-size:20px; 1em = 20px   10em = 200px

    em不足：它是相对于父元素的font-size来说的。

    适配使用em也不合适，因为它一直是相对于父元素的font-size来说的

em的特性：

1. em的值并非静止的；

2. em会秉承父级元素的字体大小，会相关于父元素的字体大小而扭转。

---

rem适配:
   

r表示root   root是根的意思   指html标签  
    1rem ==> html标签中的font-size的大小  
    1em  ==> 父标签中的font-size的大小

如：html标签的font-size设置成了34px 
    1rem = 34px  
    2rem = 68px 
    3rem = 102px

---------------------------------------
适配：
    在大屏上显示大盒子，在小屏上显示小盒子。

什么是适配？
    如果是大屏，盒子或字体大上设置的大一点
    如果是小屏，盒子或字体大小设置的小一点

10个字，在不同的手机，都是撑满一行。
---------------------------------------
使用媒体查询，实现适配：
    媒体查询 类似于 编程语言中的if else 

---------------------------------------
我有一张设计图，一行文字，10个字，在750屏上，是撑满一行的。
    还有一张图片，占手机屏的一半。
---------------------------------------
需要利用媒体查询+rem来适配，步骤如下：
    1）得到设计稿  一般情况下，设计稿的尺寸是750px。
    2）通常我们把浏览器的模拟器也调整成750px
    3）严格按照设计稿，以rem为单位，把设计稿还原出来。
    4）开始写样式，需要确定html标签的font-size，通常我会把fontsize
        定成100px，叫rem的基准值。  

        有一个盒子，width是20px  1rem = 100px。 盒子是20px
        换成rem  换成0.2rem

        又量出一个盒子的宽度是55px，换成rem就是0.55rem。

        说白了，量设计稿，量出来的Px单位，只需要除于100，就成rem单位 

        到此，你先不要管适配，你就在750px的屏上，还原750的设计稿。

    5）最后一步，把写好的页面，迁移到其它屏上的，完成适配。
        在迁移时，也需要换算。 换算如下： 
            在750px的屏上，html的font-size的大小为100px。
            在375px的屏上，html的font-size的大小为50px。
            在320px的屏上，html的font-size的大小为42.6666666px。
            在414px的屏上，html的font-size的大小为55.2px。
如果我们写要适配的屏比较多，那么我们需要写大量的媒体查询的代码。

---

JS+rem来适配：

// 实现rem适配
// 适配的是屏幕，范围 1024 ~ 1920

var setFont = function () {
    // 获取设备屏幕的宽度
    var html = document.querySelector('html');
    var width = html.clientWidth; // 获取html的宽度   
    // 判断一下，width值是否小于1024；是否大于1920
    if (width < 1024) {
        width = 1024;
    }
    if (width > 1920) {
        width = 1920;
    }
    // 计算html的fontSize值
    var fontSize = width / 80 + 'px';
    // 设置html元素的font-size
    html.style.fontSize = fontSize;
}
setFont();   //自调用先生效

// 浏览器窗口大小改变的时候，重新设置html的fontSize
window.onresize = function () {   
    setFont();
}