【前端学习——css篇】4.px和rem的区别

https://github.com/febobo/web-interview

4.px和rem的区别

①px

px,表示像素,所谓像素就是呈现在我们显示器上的一个个小点,每个像素点都是大小等同的,所以像素为计量单位被分在了绝对长度单位中

有些人会把px认为是相对长度,原因在于在移动端中存在设备像素比,px实际显示的大小是不确定的

这里之所以认为px为绝对单位,在于px的大小和元素的其他属性无关


②em

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


为了简化 font-size 的换算,我们需要在css中的 body 选择器中声明font-size= 62.5%,这就使 em 值变为 16px*62.5% = 10px

这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的 px 数值除以 10,然后换上 em 作为单位就行了

特点:

  • em 的值并不是固定的
  • em 会继承父级元素的字体大小
  • em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸
  • 任意浏览器的默认字体高都是 16px

举个例子

<div class="big">我是14px=1.4rem<div class="small">我是12px=1.2rem</div>
</div>

样式为

<style>html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  .big{font-size: 1.4rem}.small{font-size: 1.2rem}
</style>

这时候.big元素的font-size为14px,而.small元素的font-size为12px

③rem

rem,相对单位,相对的只是HTML根元素font-size的值。


同理,如果想要简化font-size的转化,我们可以在根元素html中加入font-size: 62.5%

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */ 

这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助

特点:

  • rem单位可谓集相对大小和绝对大小的优点于一身
  • 和em不同的是rem总是相对于根元素,而不像em一样使用级联的方式来计算尺寸
④vh、vw

vw ,就是根据窗口的宽度,分成100等份,100vw就表示满宽,50vw就表示一半宽。(vw 始终是针对窗口的宽),同理,vh则为窗口的高度。


这里的窗口分成几种情况:

  • 在桌面端,指的是浏览器的可视区域
  • 移动端指的就是布局视口

vwvh,比较容易混淆的一个单位是%,不过百分比宽泛的讲是相对于父元素:

  • 对于普通定位元素就是我们理解的父元素

  • 对于position: absolute;的元素是相对于已定位的父元素

  • 对于position: fixed;的元素是相对于 ViewPort(可视窗口)

总结

px:绝对单位,页面按精确像素展示

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值

rem:相对单位,可理解为root em, 相对根节点html的字体大小来计算

vh、vw:主要用于页面视口大小布局,在页面布局上更加方便简单

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/775222.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大语言模型(LLM)token解读

1. 什么是token&#xff1f; 人们经常在谈论大模型时候&#xff0c;经常会谈到模型很大&#xff0c;我们也常常会看到一种说法&#xff1a; 参数会让我们了解神经网络的结构有多复杂&#xff0c;而token的大小会让我们知道有多少数据用于训练参数。 什么是token&#xff1f;比…

浅聊openGauss逻辑架构

浅聊 openGauss 逻辑架构 概述 openGauss 数据库是一款由华为主导、各个生态合作伙伴共同建设的开源关系型数据库管理系统&#xff0c;开源发行协议遵从木兰宽松许可证 v2。 openGauss 数据库源于 PostgreSQL-XC 项目&#xff0c;内核源于 Postgres 9.2.4&#xff0c;总代码…

mybatis注解方式if标签报错元素内容必须由格式正确的字符数据或标记组成

在使用mybatis的注解方式的时候出现个问题&#xff0c;我需要一个复杂的sql语句&#xff0c;既有if判断又有in语句&#xff0c;刚开始使用mybatis自己的if动态函数的时候完全没问题&#xff0c;代码如下&#xff1a; Select({"select * ","from order_info &qu…

利用python脚本,根据词条爬取百度图片(爬虫)

把广角&#xff0c;换成你的关键词就行 # -*- coding: utf-8 -*- """ Created on Wed Mar 29 10:17:50 2023 author: MatpyMaster """ import requests import os import redef get_images_from_baidu(keyword, page_num, save_dir):header {Us…

Hadoop+Spark大数据技术 第三次作业

第三次作业 1.简述HDFS Shell三种操作命令hadoop fs、hadoop dfs、hdfs dfs的异同点。 相同点 用于与 Hadoop 分布式文件系统&#xff08;HDFS&#xff09;交互。可以执行各种文件系统操作&#xff0c;如文件复制、删除、移动等。 不同点 hadoop fs、hadoop dfs已弃用&#xf…

使用vue构建一个简单实用的春节红包插件!

摘要&#xff1a;本文将介绍如何使用Vue.js构建一个简单实用的春节红包插件。该插件通过模拟红包的打开和关闭过程&#xff0c;以及金额的随机分配&#xff0c;为春节红包活动提供了一个有趣且互动的体验。 一、引言 在春节这个充满欢乐和祝福的时刻&#xff0c;红包成为了传递…

Encoding类

Encoding System.Text.Encoding 是 C# 中用于处理字符编码和字符串与字节之间转换的类。它提供了各种静态方法和属性&#xff0c;**用于在不同字符编码之间进行转换&#xff0c;**以及将字符串转换为字节数组或反之。 在处理多语言文本、文件、网络通信以及其他字符数据的场景…

node.js项目初始化操作

项目环境Vscode 1.新建一个文件夹node.js(xx.js) 2.右键点击node.js&#xff0c;点击打开终端 我在VScode打开终端 输入npm init初始化项目没反应。 解决方法&#xff1a;进入文件夹node.js&#xff0c;出入cmd跳转到终端 重新输入npm init命令 正确结果如下图 后续命令按下…

【Leetcode】2580. 统计将重叠区间合并成组的方案数

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517; 给你一个二维整数数组 ranges &#xff0c;其中 ranges[i] [starti, endi] 表示 starti 到 endi 之间&#xff08;包括二者&#xff09;的所有整数都包含在第 i 个区间中。 你需要…

Tunes不能读取iPhone的内容,请前往iPhone偏好设置的摘要选项卡,然后单击恢复以将此iPhone恢复为出厂设置

重启itunes: 参考链接&#xff1a; https://baijiahao.baidu.com/s?id1642568736254330322&wfrspider&forpc 人工智能学习网站&#xff1a; https://chat.xutongbao.top

什么是solana PDA账户?

Solana 设计的一个核心理念是万物皆账户&#xff0c;Solana 上的几乎所有数据都可以表示为账户。 在 Solana 上&#xff0c;不仅仅是用户的钱包地址拥有账户&#xff0c;还包括智能合约、数据结构、代币、NFT 等。这些账户可以持有各种类型的数据&#xff0c;包括数字资产、智…

插值表达式、Vue指令、指令补充

vue上手步骤 <body><!-- vue2语法 --><!-- 1.准备容器&#xff1a;一会vue就会把数据展示到这里 --><div id"app"><!-- 4.使用{{ }}即可显示数据 &#xff0c;{{}}就是插值表达式--><p>姓名&#xff1a;{{uname}}</p><…

开源AI引擎|企业合同管理:自然语言处理与OCR技术深度融合

一、企业应用&#xff1a;合同智能管理 结合NLP和OCR技术&#xff0c;企业可以构建智能化的合同管理系统&#xff0c;实现合同的自动化审查、风险评估和知识抽取。这样的系统不仅能够提高合同处理的效率&#xff0c;还能够降低人为错误&#xff0c;加强风险控制。 例如&#x…

Elasticsearch 中误操作删除了所有用户解决办法

如果在 Elasticsearch 中误操作删除了所有用户&#xff0c;可以通过以下步骤重新创建用户和密码&#xff1a; 在配置文件中开启 x-pack 验证&#xff0c;修改config&#xff08;一般是在/usr/share/elasticsearch&#xff09;目录下面的elasticsearch.yml文件&#xff0c;添加…

vue3+threejs新手从零开发卡牌游戏(十八):己方场上手牌添加画线

手牌上场后&#xff0c;点击己方怪兽区卡牌会跟随鼠标移动画出线条&#xff0c;之后可以通过判断鼠标移动到对方场地的某卡牌进行战斗操作&#xff0c;代码主要改动在game/index.vue文件。 1.添加鼠标移动监听事件&#xff08;移动端&#xff09;&#xff1a; window.addEven…

Flink 学习资料

今天就不发帖子啦&#xff0c;今天发现一个好东西啊&#xff0c;喜欢Flink的同学赶紧学习起来啊&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 课程网页链接&#xff1a; GitHub - flink-china/flink-training-course: Flink 中文视频课程&#…

设计模式学习笔记 - 设计模式与范式 -结构型:4.装饰器模式

概述 前面我们学习了代理模式、桥接模式、装饰器模式&#xff0c;本章再来学习一个比较常用的结构性模式&#xff1a;适配器模式。这个模式相对来说比较简单&#xff0c;应用场景也很具体。 关于适配器模式&#xff0c;有类适配器和对象适配器两种实现方式&#xff0c;以及常…

centOS 安装MySQL8.0

1.配置yum仓库 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022 2.安装MySQL8.x版本 yum库 rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-2.noarch.rpm 或者 wget https://dev.mysql.com/get/mysql80-community-release-el7-2.noarch…

相册清理大师-手机重复照片整理、垃圾清理软件

相册清理大师是一款超级简单实用的照片视频整理工具。通过便捷的操作手势&#xff0c;帮助你极速整理相册中的照片和视频、释放手机存储空间。 【功能简介】 向上滑动&#xff1a;删除不要的照片 向左滑动&#xff1a;切换下一张照片 向右滑动&#xff1a;返回上一张照片 整理分…

flutter弹框

alertDialog:弹框 simpleDialog:选择弹框 showModalBottomSheet:底部弹出弹框 showtoast:三方插件弹框 Navigator.of(context).pop(点击取消) 关闭弹框,传递参数 import package:flutter/material.dart; // import package:flutter/cupertino.dart; import package:flut…