zoukankan      html  css  js  c++  java
  • rem、em 、font-size随着屏幕大小的改变而改变

    rem  的根标签是html

    以html标签上设置的font-size的值为参考点

    如:

    <div id="app">

      <div id="son></div>

    </div>

    html{ font-size:20px; }

    #app{

      width :4rem; ===>4*20=80px

    }

    #son {
       width :2rem; ===>2*20 =40px

    }

    如果html的font-size 的值能随便屏幕的大小变化而变化

    以下js代码放在头部,不要放body里

      <script>
            resetrem();
            //切换屏幕 (横屏竖屏)
            window.addEventListener("orientationchange", resetrem);
            //resize:屏幕的大小发生改变就触发监听事件resetrem
            window.addEventListener("resize",resetrem);
    function resetrem(){ var html = document.querySelector("html");//获取到html元素 var width = html.getBoundingClientRect().width;//获取屏幕的宽度 html.style.fontSize = width/16+"px"; } </script>

    UI图 width:414px,则css样式

    在Ihone6/7/8  font-size=25.875px

    {

     width:16 rem;   ==>414 / 25.875

    }

    em 根据父元素改变值

    以父元素为参考点

    比如:

    <div id="app">

      <div id="son></div>

    </div>

    #app{

      font-size:10px;

    }

    #son{

      font-size:1em; ==>1*10=10px

    }

    物理像素和css像素

    正常情况下 1物理像素=1css像素

    放大的时候 1css像素=3物理像素,会模糊

  • 相关阅读:
    226. 翻转二叉树-leetcode
    2的幂-leetcode
    使用 orgmode 写博客园博客
    这是一个通过Emacs Orgmode的cnblogs插件发布的博客
    测试设计的初探
    项目微管理29
    2018091-2 博客作业
    软件工程项目课题和小组成员介绍
    (项目)在线教育平台(三)
    svn 迁移至git操作手册
  • 原文地址:https://www.cnblogs.com/dudu123/p/10040844.html
Copyright © 2011-2022 走看看