px_em_rem

2023-11-20

px_em_rem

  • px
    px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
  • em和rem
    em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局;就是说当父元素大小发生变化,相应的字体大小也会发生变化,而不是一直都是某个px大小。
    对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素(rem中的r理解为root)。
    • em
      子元素font-size的em是相对于父元素font-size大小;
      元素的width/height/padding/margin用em的话是相对于该元素的font-size
    • rem
      当用rem做响应式时,直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变,很方便。

在做项目的时候用什么单位长度取决于需求,一般是:
像素(px):用于元素的边框或定位。
em/rem:用于做响应式页面,不过我更倾向于rem,因为em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下rem就只有一个参照物(html元素),这样计算起来更清晰。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

px_em_rem 的相关文章

  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 将输入中每个单词的第一个字符设为大写

    我想知道如何在输入区域自动生成单词的第一个字符 目前我的代码是 Name
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码
  • 将父容器扩展至 100% 高度以容纳浮动内容

    我正在为一个客户项目而苦苦挣扎 我的全部divs 没有绝对定位 height 100 for html body 和容器divs 但静态内容未达到其内容 在 910 像素处 我可以将溢出属性更改为auto 并且背景会继续向下到内容的末尾 但
  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • CSS:水平滚动时背景不存在

    好的 我的背景设置如下 HTML div div CONTENT HERE div div CSS container background url image gif content width 800px margin auto 因此
  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 如何在背景剪辑中包含文本装饰:文本;影响?

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4
  • dom 元素转换后 IE 显示水平滚动条

    我在网站的各个地方使用了以下 css http jsfiddle net uycq29mt 1 http jsfiddle net uycq29mt 1 a position absolute background red width 60
  • Overflow:auto 导致子 DIV 的绝对元素消失

    我有一个 div A 我在其中设置了overflow auto 现在在该 div 内 我有两个 div 父 div B 设置为position relative和子 div C 是position absolute 现在的问题是 设置ove
  • 如何使按钮在表格单元格内居中

    我试图通过以下方式将按钮置于表格内的中心 text align center 然而 它似乎对我不起作用 注 我用过Display table cell结合Vertical align middle将按钮的文本居中 正如您所看到的 第一个按钮
  • 排除单个浏览器使用 CSS 类

    我想排除 Internet Explorer 使用特定的 CSS 类 这可能吗 Details 我有一个 css 类 看起来像 input type radio checked input type radio hover box shad
  • 双弧形

    我目前正在尝试生成 波浪形幽灵底部 形状 该形状包含两条双曲线 虽然底部的部分这个图片 http images clipartpanda com ghost clip art castle ghost clipart1 jpg我认为以更好的
  • 我的CSS出了什么问题?活动链接不改变颜色

    我无法让我的 WordPress 菜单活动链接保持红色 我添加了我认为与导航相关的 CSS 还有正文等 以防影响问题 感谢您的帮助 body font family Helvetica Neue sans serif font size 1
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • CSS - 第一个没有特定类别的孩子

    是否可以编写一个 CSS 规则来选择没有特定类的元素的第一个子元素 example div span class common class ignore span span class common class ignore span sp

随机推荐

  • 【操作系统】王道考研 p42 段页式管理方式

    段页式管理方式 知识总览 分段 分页管理方式中最大的优缺点 关于段式管理会产生外部碎片 ps 分段管理中产生的外部碎片也可以用 紧凑 来解决 只是需要付出较大的时间代价 分段 分页 段页式管理 示意图 先分段 后分页 段页式管理的逻辑地址结
  • oracle 的路径不一致,DG环境搭建,在备库遇到问题,主备库的路径不一致

    现在在做oracle DG的环境搭建 因为实际生产的原因 主备库的路径是不一致的 我把主库的rman文件传到备库后 在备库进行恢复 无法恢复 求指导 oracle std bak rman target sys 123456 pri aux
  • java变量作用域和堆栈

    一 作用域决定了变量的可见性和生命周期 java中变量分为成员变量和局部变量 如下 1 成员变量 在类的所有方法外部声明的变量 即类所拥有的变量 可以被系统初始化 1 1静态成员变量 类被加载时被创建 其生命周期与该类的生命周期相同 1 2
  • 在自己的bash脚本中实现自动补全

    在90年代Linux和DOS共存的年代里 Linux的Shell们有一个最微不足道但也最实用的小功能 就是命令自动补全 而DOS那个笨蛋一直到死都没学会什么叫易用 Linux的这个微不足道的小传统一直延续至今 虽然看似微不足道 其实也极大的
  • stm32无法唤醒DTH11温湿度传感器解决

    关于DTH11的介绍和使用方法可以随便搜索一下别的文章 直接搜索DTH11即可 这里使用艾克姆科技的例程 却无法成功运行 上了示波器才发现拉低时间无法达到18ms 因此无法唤醒DTH11 总线由stm32拉低12ms左右之后就一直处于高电平
  • CString字符串查找和截取

    1 Find 该函数从左侧0索引开始 查找第一个出现的字符位置 CString str abc int postion str Find a 如果查到 返回以0索引起始的位置 未查到 返回 1 如果查到 返回以0索引起始的位置 未查到 返回
  • 卷积神经网络CNN小结(简单实现代码mnist数据集)

    由于全连接神经网络处理图像中的需要训练参数过多的问题 而卷积神经网络中 卷积层的神经元只与前一层的部分 神经元节点相连 既它的神经元的连接是非全连接的 且同一层某些神经元之间的连接的权重w和偏移b是共享的 这样大量减少了训练参数的数量 图1
  • 多线程事务怎么回滚?说用 @Transactional 可以回去等通知了!

    背景介绍 1 最近有一个大数据量插入的操作入库的业务场景 需要先做一些其他修改操作 然后在执行插入操作 由于插入数据可能会很多 用到多线程去拆分数据并行处理来提高响应时间 如果有一个线程执行失败 则全部回滚 2 在spring中可以使用 T
  • C++day4(关系运算符的重载)

    关系运算符重载的作用 可以让两个自定义类型对象进行对比操作 代码实现关系运算符的重载 include
  • unity工程崩溃资源找回

    1 Unity死机未保存场景 当你在Unity中编辑场景 突然死机时 可以在项目文件目录中找到Temp文件夹 双击文件夹 找到 Backupscenes文件夹 把后缀为 backup的文件后缀改为 unity 然后拖进Unity的Proje
  • 2021-05-03

    一 R中安装 phyloseq 的方法 很多网上的教程使用的都是 source https bioconductor org biocLite R biocLite phyloseq 但是我尝试了很多次 最后还是没有成功 下面能成功安装 p
  • 连接Mysql出现Connection unexpectedly closed

    Mysql 版本 5 7 问题 本地服务可以正常连接MySQL 在服务器部署后连接出错 服务器日志 dev miku r2dbc mysql client MySqlConnectionClosedException Connection
  • IDEA2021从零开始搭建SSM框架手把手详细教程 (一)

    开发环境 macos IDEA 2021 mysql8 0 toma9 0 源码 https download csdn net download a2267542848 19730797 1 基本环境搭建 1 新建工程 新建后整个目录如下
  • nodejs的安装与配置

    NodeJs安装与配置 之前一直在网上自己找教程装 但是经常出问题 索性自己总结一个 1 安装nodejs 去网址 https nodejs org zh cn download msi和 zip msi是Windows installer
  • 物联锁项目失败原因分析

    一 背景 2022年3月份接手IM024物联锁项目救火 此项目主要用于医院共享轮椅 共享病床 此项目是从2021年初开始立项开发 投入了大量的人力物力 但是在2022年3月份时产品工作仍然不稳定 此项目基本上可以判定为一个失败的典型 为了吸
  • 在linux下jdk安装和建立Hadoop集群的过程实验报告(搭建Hadoop集群)。

    1 模板虚拟机环境准备 相关视频 半小时快速搭建Hadoop集群 哔哩哔哩 bilibilihttps www bilibili com video BV1x5411177Y spm id from 333 880 my history p
  • (pinia-plugin-persistedstate)pinia 持久化存储

    背景 我们使用pinia的时候 会遇到页面刷新的时候数据丢失 我们自己解决的话 就是在页面刷新之前将数据存储到本地 然后在页面打开的时候将数据从本地读出来 实现数据持久化 所以我们可以通过插件来直接帮我们完成这个操作来实现自动化存储 学习p
  • Qt QTextEdit 自动滚动内容/移动光标到最后一行

    QTextEdit往文本后添加内容超出视图 并不会自动滚动到最后 需要添加以下代码 ui gt StatustextEdit gt insertPlainText text 光标后添加文本 ui gt StatustextEdit gt m
  • STM32项目--基于STM32的办公室安保(智能家居)系统设计

    基于嵌入式系统的办公室安保系统设计 简介 设计一套基于STM32的办公室安防系统 系统内部包括门禁系统 灾害报警系统 人脸识别系统和交互中心四个子系统 门禁系统 主要实现对门禁卡的存储和读取并识别已存储卡片的信息并控制开门 如读取卡片为未存
  • px_em_rem

    px em rem px px是固定的像素 一旦设置了就无法因为适应页面大小而改变 em和rem em和rem相对于px更具有灵活性 他们是相对长度单位 意思是长度不是定死了的 更适用于响应式布局 就是说当父元素大小发生变化 相应的字体大小