zoukankan      html  css  js  c++  java
  • rem 原理与简介

    一、rem 原理与简介
    字体单位:
        值根据 html 根元素大小而定,同样可以作为宽度,高度等单位
    适配原理:
        将 px 替换为 rem,动态修改 HTML 根元素的 font-size 适配
    兼容性:
        Ios 6 以上 和  Android 2.1 以上,基本覆盖所有流行的手机系统
    // 移动 web 独有的 viewport 标签
    // initial-scale 初始缩放
    // user-scaleable 用户是否可缩放
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no">
     
    1rem = html 的 font-size
    html 不设置 font-size 默认 1rem = 16px
     
    二、如何根据不同屏幕设置 font-size 大小
    1、媒体查询
    <style type="text/css">   
       @media screen and (max- 320px) {
            html {
              font-size: 20px;
            }
          }  
        @media screen and (max- 360px) and (min- 321px) {
            html {
              font-size: 24px;
            }
          }
    </style>
    2、使用 js 方式
    <script type="text/javascript">
        // 获取视窗宽度
        let htmlWidth =
        document.documentElement.clientWidth || document.body.clientWidth
        console.log(htmlWidth)
     
     
        // 获取视窗高度
        let htmlDom = document.getElementsByTagName('html')[0]
     
     
        htmlDom.style.fontSize = htmlWidth / 10 + 'px'
    </script>
     
    三、rem 与 scss 相结合
    1、rem 基准值的计算
        rem 基准值就是 html 的 font-size
    2、rem 数值计算与构建
        换算出的 px 值的 rem 的值
        如 1rem = 16px
        170px = 170/16 rem
    3、rem 与 scss 相结合
     
    // 封装
    @function px2rem($px) {
        $rem: 37.5px // 以 iPhone 6 浏览器为基础 基准值就为 375 / 10 = 37.5
        @return ($px / $rem) + rem  // return 的值为 传进来的 px值 / rem基准值 + rem 单位
    }
    // 使用
    .box {
         px2rem(100px)
       height: px2rem(100px)
    }
  • 相关阅读:
    贪心算法 Wooden Sticks
    HDOJ 2189 悼念512汶川大地震遇难同胞——来生一起走
    hdoj1069 Monkey and Banana(最长上升子序列)
    2012级计科《程序设计基础Ⅱ》期末上机考试
    Constructing Roads In JGShining's Kingdom
    c语言学习随笔之指针(二)
    c语言学习随笔之指针(一)
    遍历网页框架结构
    笔记本测试软件(让奸商头疼的软件)0
    ResizePicturevb.net
  • 原文地址:https://www.cnblogs.com/qq-944286441/p/10746954.html
Copyright © 2011-2022 走看看