• rem理解及应用【笔记】


    一、rem的定义理解

    1.rem的定义理解: 通过设置 根元素<html>的font-size的大小,来控制整个html文档内的字体大小、元素宽高、内外边距等,

    2.rem(font size of the root element)是指相对于根元素的字体大小的单位。

     em(font size of the element)是指相对于父元素的字体大小的单位。
     它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
     

    二、为何使用rem?

    1、实现强大的屏幕适配布局

    2、响应式做法

    3、设置viewport进行缩放

    4、rem能等比例适配所有屏幕

    三、用js去计算并设置html标签的font-size大小 

    <script>
        //原始设计果图大小是640
        var fontSizeAuto = function(oriWidth){
            return function(){
                var viewportWidth = document.documentElement.clientWidth;
                if(viewportWidth > oriWidth){ viewportWidth = oriWidth; }
                if(viewportWidth < 320){ viewportWidth = 320; }
                document.documentElement.style.fontSize = viewportWidth/(oriWidth/100) +'px';    
            }
        }
        fontSizeAuto(640)();
        window.onresize = fontSizeAuto(640);
    
        //原始设计果图大小是750,则
        fontSizeAuto(750)();
        window.onresize = fontSizeAuto(750);
    </script>
    <script>
       //原始设计果图大小是640
     $(document).ready(function(){
        // rem兼容
            var winW = $(window).width();/*获取设备宽度*/
            var constant = winW/6.4;/*设置根元素<html>字体大小*/ 
      $(
    'body,html').css({"font-size":constant});/*初始化字体大小*/
      $(window).resize(
    function(){
        var winW = $(window).width();
        var constant = winW/6.4;
        $(
    'body,html').css({"font-size":constant});
      })
    })
    </script>
    <script>
        /*设置根元素<html>字体大小*/
        function getRem() {
        var html = document.getElementsByTagName("html")[0]; /*获取标签元素<html>*/
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth; /*获取设备的宽度  ||后为兼容IE低版本写法*/
           html.style.fontSize = oWidth / 6.4 + "px"; /*设置根元素<html>字体大小   计算出的值 就相当于1rem;为什么? 这就是rem单位的规定 1rem就等于根元素<html>字体大小*/
            }
             /*6.4: 为设计稿宽度640px; 若是750px的设计稿 只需要将6.4改为7.5即可。
             * 在手机屏幕宽度与设计稿一致时,即:oWidth = 750px 那么上面的计算 oWidth / 6.4 + "px" 结果就是100px;  html.style.fontSize = 100px 
             *css3中规定 1rem就对应这<html>的font-size的大小,所以100px = 1rem 这样方便大家将px转化为rem 按照这个比例来设置字体大小、元素宽高、内外边距等的单位为rem;
             *举例:在设计稿中,某一行字体大小为14px,则我们需要在css文件中将对应的字体设置为0.14rem;
             *在设计稿中,某一个元素宽高分别为 100px与20px;则我们需要在css中将对应的宽高设置为1rem与0.2rem;
             */
            /*页面初始化调用getRem()*/
        window.onload = function() {
           /*初始化*/
           getRem();
           /*getRem绑定监听*/
           window.addEventListener("resize", getRem, false);
        };
    </script>

     四、移动端自适应rem使用步骤

      第一步:分析确定设计图的大小

      第二步:增加js脚本

      第三步:样式表中使用rem单位

  • 相关阅读:
    Markdown 简明语法手册
    linuxmint
    添加 Windows 8.1 无虚拟机启动项 解决极品飞车的不支持虚拟机报错
    工作室案例在线展示
    流风ASP.NET框架商业版-工作流1.0简介
    GNS3的使用2
    再见
    JSR303结合切面校验参数
    统一异常处理
    分布式会话
  • 原文地址:https://www.cnblogs.com/start-bigin/p/12606182.html
Copyright © 2020-2023  润新知