【校招VIP】前端JS语言考点之px rem等单位

考点介绍

rem vm等问题是前端面试里的高频题型。但是不少同学并不能很清楚的说明为什么在有px单位之后,还需要rem单位?往往会往不对的自适应方向回答。

作为基础性问题,只要回答不出来,面试就通过不了,需要真正理解,而不是死记硬背......

前端JS语言考点之px rem等单位-相关题目及解析内容可点击文章末尾链接查看!

一、考点题目

1.请你说说em与rem的区别?
解答: rem是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数

只相对于根元素的大小

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位......

2.移动端-以一个固定尺寸(750px)为标准-将 px 转化为 rem
解答:

3.rem布局?
解答:html{font-size: 16px} div{font-size: 1rem}

这里的rem就是16px;

给html{font-size: 26.66667vw;};//

26.66667vw = 100px / 375px *100vw,这是iPhone5下的值,如果是其他更大尺寸的手机,26.66667vw的实际像素数要大于100px......

二、考点文章

1.【校招VIP】前端开发入门到实战:CSS中字体单位:px、em、rem和%

对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem...等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手。

"网页"和"印刷"的单位

若要把单位做区隔,最简单可以分为"网页"和"印刷"两大类,通常对于CSS来说只会应用到网页的样式,毕竟真正要做印刷,还是会倾向透过排版软件来进行设计......

2.【校招VIP】px与 rem css常见单位

vmin和vmax是与屏幕的宽度和高度的最大值或着最小值有关,取决于哪个更大和更小。例如,如果浏览器设置为width750px,height1100px,1vmin会是7.5px,1vmax为11px。如果宽度设置为11000px,高度设置为750px,1vmin将会等于7.5px而1vmax将会是11px。

设想你需要一个总是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将可以实现这个效果。例如,一个div总是至少接触屏幕的两条边可能是这样定义的......

3.【校招VIP】px、rem、em的区别与联系

  1. px是固定的像素,一旦设置了就无法因为适应页面大小而改变。

  2. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。

3.em是相对于其父元素来设置字体大小的,一般都是以<body>的"font-size"为基准。这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值......

三、考点视频

把CSS的复杂选择器和简单选择器放到一起比较优先级,会不会晕

当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢?

定义的属性有冲突时,浏览器会选择用那一套样式呢,下面来介绍一下选择器的优先级......

前端JS语言考点之px rem等单位-相关题目及解析内容可点击下方链接查看:
前端JS语言考点之px rem等单位-移动端链接
前端JS语言考点之px rem等单位-PC端链接

相关推荐
FungLeo2 小时前
成为全栈·React 管理后台篇·总复盘:从“接口能调通”到“后台值得使用”
前端·react.js·前端框架·项目复盘·成为全栈
Csvn4 小时前
并发模式:让渲染学会排队、插队和让路
前端
可乐鸡翅yeah_4 小时前
新手梳理:M3U8 线上问题,哪些是前端锅,哪些是后端锅
前端·ios·音视频·实时音视频·m3u8·音视频在线播放
Flynt4 小时前
Linear 用 1000 个 PR 换掉 styled-components,我写了 200 个按钮,把这笔账复现了一遍
前端·css·preact
JavaGuide5 小时前
NVIDIA 又开源了!这次给 AI Agent 加上权限管控
前端·后端
excel5 小时前
prisma 如何处理数据库竞态
前端·数据库·后端
莪_幻尘6 小时前
Skill 体检:30 个 Skill 全凭感觉?体检器先自曝了 8 个“假 0 分
前端·人工智能·llm
风骏时光牛马6 小时前
AI模型综合能力评测:性能、指令遵循与多场景实测对比
前端
Frag0ut6 小时前
Chrome与Chromium内核浏览器在Windows 11上的新特性全景解析
前端·chrome·windows·web安全·chromium·gemini ai·playready drm
hiahiahia1237 小时前
实现完整 Tool Dispatcher
开发语言·前端