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

2023-11-03

考点介绍
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端链接

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

【校招VIP】前端JS语言考点之px rem等单位 的相关文章

随机推荐

  • 各种Java技术框架数据库连接池的配置参数

    3 Proxool Proxool的使用和dbcp以及c3p0稍有不同 我们需要并且只需要在使用基本的java sql DriverManager之前加载org logicalcobwebs proxool ProxoolDriver驱动类
  • vue项目html页面生成PDF预览、下载及生成页面水印

    html2canvas官方文档 jspdf官方文档 目录 概述 原理 过程中遇到的问题 生成的PDF截图 代码示例 加水印版代码示例 现存问题 概述 因为生成的PDF内还有富文本 后端不好生成PDF 故由前端完成 原理 html2canva
  • TFTP服务器搭建与测试

    一 基础知识介绍 TFTP Trivial File Transfer Protocol 简单文件传输协议 是一个基于 UDP 协议实现的用于在客户机和服务器之间进行简单文件传输的协议 适合于开销不大 不复杂的应用场合 TFTP协议专门为小
  • Java集合之LinkedList

    目录 基本介绍 常用方法 源码解析 1 LinkedList的底层结构 Node双向链表 2 LinkedList的几个内部变量 3 getFirst 4 removeFirst 5 addFirst E e 6 contains Obje
  • Docker(无废话版)

    如果无产阶级不能发出自己的声音 他们就会被社会遗忘 前言 学docker是为了部署django应用 docker 即镜像 容器 仓库 一 三要素 1 镜像 image 镜像来自于仓库 当然也可以是自己编写的dockerfile文件 创建自定
  • SELINUX初步理解

    SELinux简介 1 系统中所有的文件都必须打上SELinux的标签 多个文件可以打上同一个标签 2 每个进程运行在一个单独的domain中 3 每个进程需要访问任何文件都需要进行显示的声明 声明该domain对某标签的权限 系统中的每个
  • MongoDB集群部署

    安装部署 部署3分片的Mongo集群 下面是架构图 实际环境每个分片最好不要放在同一台机器 不同分片的主从也尽量分散 否则数据库压力大的时候磁盘会成为瓶颈 下面的安装示例仅为学习交流 每个节点创建用户 groupadd mongo user
  • mac的mysql workbench打不开解决

    问题 原因 mac 升级后默认卸载python2 7 brew也搜索不到 不方便安装 解决 手动安装包 安装python2 7 python2 7下载链接 https www python org ftp python 2 7 18 pyt
  • 搜索框(js)

  • docker 启动Elasticsearch镜像指令

    docker run d e ES JAVA POTS Xms256m Xmx256m e discovery type single node p 9200 9200 p 9300 9300 name ES3 502bab3f5e7d
  • 机器学习:Python实现多标签分类(Multi-label Classification)

    1 多标签分类 1 1 定义 传统的多分类算法是对一个训练样本仅标记一个类别标签 而多标签分类 Multi label Classification MLC 是指对每个训练样本分配一个或一个以上的类别标签 其数学模型如下 给定一个 d d
  • React中state状态详解

    文章目录 1 基本使用 2 使用setState操作state数据 3 案例 toDoList 4 案例 购物车 1 基本使用 要点 成员属性 state 它是一个特殊的属性 它是当前类的私有数据 只有在当前的组件中才能操作里面的数据 状态
  • 【解决】JS中使用foreach循环,无法终止判断跳出循环;JS中使用try catch跳出foreach循环;浅谈JS深浅拷贝......

    问题 在foreach循环中有一个判断 需要在第一次符合该判断时跳出该循环 结果是未跳出 示例代码如下 this arr forEach item index gt if item uuid this uuid 会走多次该循环 此时使用re
  • 客户端测试是什么?你了解客户端测试吗?

    大家好 我是大圣 最近接到一个问题 客户端测试是什么 今天我们就来说说客户端测试 客户端 顾名思义就是Client 就是大家常说的C S架构里的Client 随着移动端越来越发达 现在的客户端分为PC端应用程序以及移动端APP 今天我们就针
  • python入门学习之小工具制作系列--02使用tkinter库写一个BMI身体指数检测小程序

    一 小程序检测功能逻辑 即通过输入身高 体重两个数据即可计算自己的BMI身体指数是多少 且对身体状况做相应提醒 二 小程序使用体验 1 弹出主界面 输入身高 体重数据 2 点击计算 输出BMI数据 3 根据BMI结果 给出相应的建议 三 小
  • 第7章 OpenWrt-opkg包管理

    第7章 OpenWrt OPKG 本章讲解了OPKG包管理工具 OPKG Open OpenWrt Package 是 IPKG Installing Packages 衍生版本 可以用于安装应用层ipk和驱动ipk等 在安装时会自动解决安
  • HCIA-AI 3.0题库

    一 人工智能概览 多选 1 下列哪些属于 AI 的子领域 A 机器学习 B 计算机视觉 C 语音识别 D 自然语言处理 答案 ABCD 判断 2 语音识别指的是将音频数据识别为文本数据 A TRUE B FALSE 答案 A 单选 3 人工
  • UEFI启动模式的服务器使用U盘安装Linux系统

    今天要为一台十年前的IBM服务器安装CentOS7系统 本来以为是手到擒来的小事 没想到啊 没想到 竟然折腾了一个上午 罪魁祸首就是这台服务器是快速启动的方式 且看下文 这里我将虚拟机安装的系统设置成uefi启动 设置方法是打开系统配置文件
  • Adobe Premiere Rush CC 2020中文版

    教程 1 下载解压镜像文件 2 断开网络连接 资源地址在评论区 3 运行 autoplay exe 开始安装 点击 Install 4 设置默认不变 点击 继续 5 等待进度到达100 6 安装成功 运行Adobe Premiere Rus
  • 【校招VIP】前端JS语言考点之px rem等单位

    考点介绍 rem vm等问题是前端面试里的高频题型 但是不少同学并不能很清楚的说明为什么在有px单位之后 还需要rem单位 往往会往不对的自适应方向回答 作为基础性问题 只要回答不出来 面试就通过不了 需要真正理解 而不是死记硬背 前端JS