rem 和 em

2021-01-19 19:00:25 阅读：162 来源： 互联网

移动端像素

为什么使用移动端适配：
1）随着时代的发展，在移动端上访问pc端的页面，逐渐变的常态化
2）手机的设备尺寸，碎片化越来越严重
碎片化：种类繁多，五花八门

移动端的测试方式：
1）谷歌浏览器提供的虚拟机
2）电脑和手机在同一局域网内，扫描编译器提供的二维码，即可在手机上查看
3）搭建本地服务器，来建立访问

 <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值（要写在元素样式上的值）

//一些浏览器中，无法获取到documentElement,所以去获取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获得。
-->

标签：em,字体大小,元素,html,rem,document
来源： https://blog.csdn.net/weixin_54645137/article/details/112849588

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

rem 和 em

移动端像素