zoukankan      html  css  js  c++  java
  • rem 、em

    介绍:rem是相对字体单位;根据html根元素大小而定,同样可作为宽高等单位;

    适配原理:将px替换成rem,采用rem适配移动web的原理,根据不同屏幕宽度设置html的font-size的大小;

    计算公式:1rem=html的font-size(浏览器默认font-sizt:16px);

    动态修改font-size方法

           1.@media查询

            @media screen and(max-300px) and(min-200px){

                  html{

                         font-sizt:20px;

                         }

            }

            这种方式比较麻烦,因为移动端需要是配的手机型号太多;

           2、js设置font-size

               获取视窗:  let  win_width=document.documentElement.clientWidth ||  document.body.clientWidth;

               获取html:     let  htmlDom=document.getElementsByTag("html")[0];

               设置属性:    htmlDom.style.fontSize=win_width/10+"px";

            

    em

    是相对长度单位。相对于当前对象内文本的字体尺寸;如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸

    em单位有如下特点

    1. em的值并不是固定的;

    2. em会继承父级元素的字体大小。

    em是继承父元素的字体大小,可是当父元素字体大小改变时,又得重新计算了,这不怎么方便,

  • 相关阅读:
    Spring Boot
    Spring Boot – Jetty配置
    如何使ESLint在Visual Studio 2019和2017中工作: 2019 v16和2017> = v15.8
    CentOS 7 安装 Nginx
    HTTPS-使用Certbot自动配置Let’s Encrypt证书
    centos7升级内核到最新版本
    [C#.net]Connection Timeout和Command Timeout
    Redis中切换db
    Redis 模糊查询删除操作
    [Abp vNext 源码分析]
  • 原文地址:https://www.cnblogs.com/yongyang/p/8893736.html
Copyright © 2011-2022 走看看