【校招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
解答

(function(win, lib) {
  var doc = win.document;
  var docEl = doc.documentElement;
  var devicePixelRatio = win.devicePixelRatio;
  var dpr = 1;
  var scale = 1;
   
  // 设置vierPort
  function setViewport() {
    dpr = 1;
    win.devicePixelRatioValue = dpr;
    scale = 1 / dpr;
    var metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute(

3.rem布局?
解答:html{font-size: 16px} div{font-size: 1rem}
这里的rem就是16px;
给html{font-size: 26.66667vw;};//......

二、考点文章

1.【校招VIP】前端开发入门到实战:CSS中字体单位:px、em、rem和%
对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem…等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手......

2.【校招VIP】px与 rem css常见单位
css的单位:px 这个不需要说,rem/em,vh/vw,vmax/vmin......

3.【校招VIP】px、rem、em的区别与联系
px是固定的像素,一旦设置了就无法因为适应页面大小而改变;em和rem相对于px更具有灵活性,他们是相对长度单位......

三、考点视频

1、把CSS的复杂选择器和简单选择器放到一起比较优先级,会不会晕
当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢……

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

前端JS语言考点之px rem等单位-移动端链接
前端JS语言考点之px rem等单位-PC端链接

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

compile_and_runtime_not_namespaced_r_class_jar\debug\R.jar: 另一个程序正在使用

问题情况: run App的时候,提示该文件被占用 想要clean Project,还是提示该文件被占用,这个文件和连带的文件夹都无法被删除。 方法1: AndroidStudio下方的terminal(没有这个窗口的话,从上面的…

【JAVA基础】- 同步非阻塞模式NIO详解

【JAVA基础】- 同步非阻塞模式NIO详解 文章目录 【JAVA基础】- 同步非阻塞模式NIO详解一、概述二、常用概念三、NIO的实现原理四、NIO代码实现客户端实现服务端实现 五、同步非阻塞NIO总结 一、概述 NIO(Non-Blocking IO)是同步非阻塞方式来处理IO数据。…

【Spring Boot】构建RESTful服务 — RESTful简介

RESTful简介 本节将从基础的概念开始介绍什么是RESTful、RESTful的特点、RESTful中的资源、HTTP Method、HTTP Status,还将介绍RESTful和SOAP到底有哪些区别。 1.什么是RESTful RESTful是目前流行的互联网软件服务架构设计风格。REST(Representationa…

html练习

html练习 工具代码运行结果 工具 HBuilder X 代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>图灵之家</title></head><body><h1>图灵之家</h1><br><br><h2>我的…

项目实战 — 博客系统② {项目构建}

目录 一、创建项目 二、添加数据库 三、设置配置文件相关信息 四、 添加前端页面 五、构建项目分层 六、编写基本类 一、创建项目 二、添加数据库 -- 创建数据库 drop database if exists cat_blog; create database cat_blog DEFAULT CHARACTER SET utf8mb4;-- 使用数…

微服务——ES实现自动补全

效果展示 在搜索框根据拼音首字母进行提示 拼音分词器 和IK中文分词器一样的用法&#xff0c;按照下面的顺序执行。 # 进入容器内部 docker exec -it elasticsearch /bin/bash# 在线下载并安装 ./bin/elasticsearch-plugin install https://github.com/medcl/elasticsearch…

Mr. Cappuccino的第60杯咖啡——Spring之BeanFactory和ApplicationContext

Spring之BeanFactory和ApplicationContext 类图BeanFactory概述功能项目结构项目代码运行结果总结 ApplicationContext概述功能MessageSource&#xff08;国际化的支持&#xff09;概述项目结构项目代码运行结果 ResourcePatternResolver&#xff08;匹配资源路径&#xff09;概…

一、初始 Spring MVC

文章目录 一、回顾 MVC 模式二、初始 Spring MVC2.1 Spring MVC 核心组件2.1.1 前端控制器&#xff08;DispatcherServlet&#xff09;2.1.2 处理器映射器&#xff08;HandlerMapping&#xff09;2.1.3 处理器适配器&#xff08;HandlerAdapter&#xff09;2.1.3 后端控制器&am…

前端性能优化之性能优化的指标和工具(chrome devtools、lighthouse、webpagetest)

文章目录 引言一、为什么要进行web性能优化二、RAIL测量模型1. 什么是RAIL2. 性能测量工具 三、性能测量工具的使用和性能指标以及优化目标1. Chrome DevTools1. 打开调试工具方式和配置2. network下的几个性能指标1. requests 请求总数2. transferred实际从服务器下载的数据量…

学会智慧工地有多爽?能省时间又高效?

当今社会&#xff0c;科技的迅速发展正在深刻地改变着各行各业&#xff0c;建筑领域也不例外。在这一背景下&#xff0c;"智慧工地"这一概念应运而生&#xff0c;它代表了将创新技术和数字化解决方案引入建筑工地&#xff0c;以提升效率、安全性和可持续性的愿景。 智…

岛屿的最大面积(力扣)递归 JAVA

给你一个大小为 m x n 的二进制矩阵 grid 。 岛屿 是由一些相邻的 1 (代表土地) 构成的组合&#xff0c;这里的「相邻」要求两个 1 必须在 水平或者竖直的四个方向上 相邻。你可以假设 grid 的四个边缘都被 0&#xff08;代表水&#xff09;包围着。 岛屿的面积是岛上值为 1 的…

vue3+element-plus点击列表中的图片预览时,图片被表格覆盖

文章目录 问题解决 问题 视觉 点击图片进行预览&#xff0c;但还能继续选中其他的图片进行预览&#xff0c;鼠标放在表格上&#xff0c;那一行表格也会选中&#xff0c;如图所示第一行的效果。 代码 <el-table-column prop"id" label"ID" width"…

回归预测 | MATLAB实现K折交叉验证GRNN广义回归神经网络多输入单输出回归预测

回归预测 | MATLAB实现K折交叉验证GRNN广义回归神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现K折交叉验证GRNN广义回归神经网络多输入单输出回归预测效果一览基本介绍研究内容程序设计参考资料效果一览 基本介绍 回归预测 | MATLAB实现K折交叉验证GRNN广义回归神经…

深入探析设计模式:工厂模式的三种姿态

深入探析设计模式&#xff1a;工厂模式的三种姿态 1. 简单工厂模式1.1 概念1.2 案例1.3 优缺点 2. 抽象工厂模式2.1 概念2.2 案例&#xff1a;跨品牌手机生产2.3 优缺点 3. 超级工厂模式3.1 概念3.2 案例&#xff1a;动物园游览3.3 优缺点 4. 总结 欢迎阅读本文&#xff0c;今天…

“深入解析Maven:安装、创建项目和依赖管理的完全指南“

目录 引言Maven的安装创建Maven项目之前的装备工作Eclipse创建新的Maven项目项目依赖管理 总结 引言 Maven是一个流行的项目管理工具&#xff0c;被广泛用于Java项目的构建、依赖管理和部署。它提供了一种简单而强大的方式来管理项目的各个方面&#xff0c;使开发人员能够更专…

虹科展会 | 自动驾驶展品:上海汽车测试展精彩回顾

2023年8月9日-8月11日&#xff0c;上海国际汽车测试及质量监控博览会在上海圆满落幕。本次展会提供了一个了解最新汽车测试及质量监控技术、产品和趋势的机会&#xff0c;同时也是汽车测试及质量监控领域的专业人士和业内人士的重要交流平台。 雅名特是虹科旗下子公司&#xff…

2023年国赛数学建模思路 - 案例:FPTree-频繁模式树算法

文章目录 算法介绍FP树表示法构建FP树实现代码 建模资料 ## 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模式树算法&#xff0c…

改造旧项目-长安分局人事费用管理系统

一、系统环境搭建 1、搭建前台环境 vue3vite构建项目复制“银税系统”页面结构&#xff0c;包括&#xff1a;路由、vuex存储、菜单、登录&#xff08;复制一个干净的空架子&#xff09; 2、搭建后台环境 新三大框架 SSMP聚合工程&#xff1a;common、admin&#xff0c;新的…

《算法竞赛·快冲300题》每日一题:“房间划分”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 房…

全文检索与日志管理 Elasticsearch(上)

一、Elasticsearch介绍 1.1 全文检索索引 Elasticsearch是一个全文检索服务器&#xff0c;全文检索是一种非结构化数据的搜索方式。 那么什么是结构化数据和非结构化数据呢&#xff1f; 结构化数据&#xff1a;指具有固定格式固定长度的数据&#xff0c;如数据库中的字段。 …