首页 > 其他分享 >rem、vw、vh、em原理汇总

rem、vw、vh、em原理汇总

时间:2023-04-17 10:24:17浏览次数:39  
标签:em vh 视口 rem font size

1. rem :  rem是根据根元素的font-size大小来设置的,比如设置html font-size=100px, 那么1rem = 100px, 之后所有的元素都可以使用这个基准值来设置大小

2. vw: 视口宽度单位     1vw = 1/100视口宽度, 宽度全屏就是100vw

3. vh: 视口高度单位   1vh = 1/100视口高度, 高度全屏就是100vh

4. em: em是根据使用em元素(父元素)的字体大小, 比如设置div font-size=18px, 那么当前div的1em = 18px  ---- 因font-size有继承性,所以当前比例如果没定义,会受父元素的font-size值来控制

 

标签:em,vh,视口,rem,font,size
From: https://www.cnblogs.com/workJiang/p/17324931.html

相关文章

  • C++-template class-模板类
    C++-templateclass-模板类【C++高级教程,C++类模板一次讲透,必须收藏!】https://www.bilibili.com/video/BV1v84y1x7Qp/?share_source=copy_web&vd_source=3809390a14c335e7731c9e076c03eeba类模板概念类模板是用于生成类的模板。在编译阶段,编译器会根据类模板的使用情况创建......
  • React onBlur回调中使用document.activeElement返回body解决方案
    最开始想实现一个功能,点击img图标后给出购物下拉框CartDropdown,当img及CartDropdown失去焦点时隐藏CartDropdown。最开始的核心代码如下:exportdefaultfunctionCart(){ const[isCartOpen,setIsCartOpen]=useState(false) functionclickHandler(){ setIsCartOpen(......
  • Semantic Kernel 入门系列 ❤️‍
    SemanticKernel是一种轻量级应用开发框架,用于快速开发融合LLMAI的现代应用。此系列文章,将会从传统软件开发者的角度,逐步认识SemanticKernel,并了解其核心概念和基本的使用方法。......
  • Semantic Kernel 入门系列:
    SemanticKernel的一个核心能力就是实现“目标导向”的AI应用。目标导向“目标导向”听起来是一个比较高大的词,但是却是实际生活中我们处理问题的基本方法和原则。顾名思义,这种方法的核心就是先确定目标,然后在寻找实现目标的方法和步骤。这对于人来说的是很自然的事情,但是对......
  • template标签的学习
    template标签我在引用这个标签的时候,本来还在纳闷,咋就他那么特殊,就他不显示,然后突然意识到,这个标签天生不可见,即display:none属性可以在template标签里面放content模块,然后使用button点击事件实现内容的展现;具体实现如下:<template><ul><li>模块1</li><......
  • Topcoder 10880 - Rabbit Problemming
    \[兔子,兔子,兔子\]首先,我们考虑一只兔子可以达到的最大值\(mx_i\)和最小值\(mn_i\),这个可以很方便的求出来。并且每只兔子的取值是独立的。然后,如果一个组合能被选中,那么在这个组合内部所有的兔子都取\(mx_i\),其他的兔子都取\(mn_i\)的时候一定也能被选中。我们就钦定所有......
  • 计算机网络基础——06 Email 服务器的配置和应用
    6.1 实验目的1.了解电子邮件的工作原理和常见的邮件服务器软件2.掌握电子邮件服务器软件 CMailServer 的安装和配置3.掌握使用浏览器和电子邮件客户端软件来收发电子邮件6.2 实验相关知识6.2.1 电子邮件的相关知识电子邮件的一般处理流程与传统邮件有相似之处:(1)当用户在计......
  • kubebuilder开发kubernetes operator demo
    环境准备go环境配置wgethttps://golang.google.cn/dl/go1.19.8.linux-amd64.tar.gztarzxvfgo1.19.8.linux-amd64.tar.gzmvgo/usr/local/vim/etc/profile在最结尾添加exportHOME=/rootexportGOROOT=/usr/local/goexportGOPATH=/opt/idcus/goexportPATH=$PATH:......
  • Lab syscall: System calls
    Systemcalltracing修改Makefileuser在user/user.h中添加系统调用声明在user/usys.pl中添加桩程序,生成user/usys.S即真实的系统调用桩程序kernel在kernel/syscall.h中添加系统调用号在kernel/proc.h中修改structproc,添加trace_mask变量,在kernel/sysproc.c......
  • Attributed Graph Clustering |A Deep Attentional Embedding Approach
    论文阅读01-AttributedGraphClustering:ADeepAttentionalEmbeddingApproach1.创新点ideaTwo-step的图嵌入方法不是目标导向的,聚类效果不好,提出一种基于目标导向的属性图聚类框架。所谓目标导向,就是说特征提取和聚类任务不是独立的,提取的特征要在一定程度上有利于聚类......