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

news2024/11/24 14:43:07

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

 

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

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

相关文章

在vue中使用swiper轮播图(搭配watch和$nextTick())

在组件中使用轮播图展示图片信息: 1.下载swiper,5版本为稳定版本 cnpm install swiper5 2.在组件中引入swiper包和对应样式,若多组件使用swiper,可以把swiper引入到main.js入口文件中: import swiper/css/swiper.css //引入swipe…

树莓派3B CSI摄像头配置

1.硬件连接 1、找到 CSI 接口(树莓派3B的CSI接口在HDMI接口和音频口中间),需要拉起 CSI 接口挡板,如下: 2、将摄像头排线插入CSI接口。记住,有蓝色胶带的一面应该面向音频口或者网卡方向, 确认方向并插紧排线,将挡板…

基于Spring Boot的高校图书馆管理系统的设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频: 基于Spring Boot的高校图书馆管理系统的设计与实现(Javaspring bootMySQL) 使用技术: 前端:html css javascript jQuery ajax thymeleaf 微信小程序 后端:Java sp…

springBoot 集中配置管理

springBoot 集中配置管理 项目配置如果上线项目,运维或者开发者可以直接和jar包同目录下创建文件,然后更改属性 项目配置 创建文件,调整配置如果上线项目,运维或者开发者可以直接和jar包同目录下创建文件,然后更改 属…

海格里斯HEGERLS四向穿梭车仓储解决方案在电子商务行业中的应用

随着现代物流,尤其是智能化物流的飞速发展,河北沃克金属制品有限公司看到了智能物流领域背后的巨大价值和市场空间,深知物流与供应链对企业发展的重要性。于是,引进了先进的高科技智能技术—HEGERLS四向穿梭车技术,并迅…

echarts-convert.js使用

echarts-convert.js demo 点击下载 1、本地安装phantom.js插件 点击下载 2、更改文件路径 (D:\phantomjs-2.1.1-windows\bin)改为本地项目文件路径 3、打开cmd命令行,并格式化语言 运行以下命令 将命令行语言改为中文简体 chcp 65001…

超详细,自动化测试实战-获取配置文件信息(实例源码)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 配置文件的类型 …

03.Show and Tell

目录 前言泛读摘要IntroductionRelated Work小结 精读模型基于LSTM的句子生成器TrainingInference 实验评价标准数据集训练细节分数结果生成结果多样性讨论排名结果人工评价结果表征分析 结论 代码 前言 本课程来自深度之眼《多模态》训练营,部分截图来自课程视频。…

新题速看!2023阿里、腾讯、字节都在问的SQL数据库笔试题及答案都给你整理好啦!

♥ 前 言 2021到了最后一个月份,年后肯定有蛮多小伙伴需要跳槽换工作,但对于年限稍短的软件测试工程师,难免会需要进行笔试,而在笔试中,基本都会碰到一道关于数据库的大题,今天这篇文章呢,就…

保存位置不同,多个文件如何统一命名并给文件编号

在日常工作中,我们会经常碰到文件或文件夹需要整理归类下,或文件(夹)需要统一名称再编号下再保存,也方便日后用到文件时可以快速找到文件。大家有没有碰到文件多个,但是文件的保存位置不一样,并…

聚观早报 | 近2亿“救命款”每日优鲜不卖菜了;小鹏G6难过交付关

【聚观365】8月14日消息 近2亿元“救命款”每日优鲜不卖菜了 小鹏爆款G6难过交付关 AIGC在数字营销领域应用程度 iPhone SE 4设计基于iPhone 14 Modulal寻求A轮融资挑战英伟达 近2亿元“救命款”每日优鲜不卖菜了 从一家基于前置仓模式的蔬菜水果等本地生活服务商&#x…

多个项目使用的node版本不一致?vscode dev container + docker 真香

一、接手的项目多了,什么node版本都有~ 遇到这种情况,多数情况会使用 nvm 进行 node 版本管理,具体使用方法可戳nvm的安装与使用。但若要并行开发两个不同环境下的项目,不停切换node版本,也难免有些繁琐。此时&#xf…

基于HTML+CSS+Echarts大屏数据可视化集合共99套

基于HTMLCSSEcharts大屏数据可视化集合共99套 一、介绍二、展示1.大数据展示系统2.物流订单系统3.物流信息系统4.办税渠道监控平台5.车辆综合管控平台 三、其他系统实现四、获取源码 一、介绍 基于HTML/CSS/Echarts的会议展览、业务监控、风险预警、数据分析展示等多种展示需求…

共识算法初探

共识机制的背景 加密货币都是去中心化的,去中心化的基础就是P2P节点众多,那么如何吸引用户加入网络成为节点,有那些激励机制?同时,开发的重点是让多个节点维护一个数据库,那么如何决定哪个节点写入&#x…

浅谈人工智能技术与物联网结合带来的好处

物联网是指通过互联网和各种技术将设备进行连接,实时采集数据、交互信息的网络,对设备实现智能化自动化感知、识别和控制,给人们带来便利。 人工智能是计算机科学的一个分支,旨在研究和开发能够模拟人类智能的技术和方法。人工智能…

【apifox】如何写一份合格的 API 文档?

要想弄清楚如何开始写出一份合格的 API 文档,我们需要首先了解什么是 API,它的使用场景有哪些,应该具备什么样的能力。 什么是 API? 想象一下,当小 A 购入了一台新的电脑后,希望将显示画面投射至一块色准…

时序预测 | MATLAB实现基于BP神经网络的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于BP神经网络的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于BP神经网络的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 Matlab实现BP神经网络时间序列预测未来(完整…

OpenLayers实战,OpenLayers高德地图瓦片位置纠偏,将高德底图瓦片位置转换为EPSG:4326和EPSG:3857

专栏目录: OpenLayers实战进阶专栏目录 前言 在日常开发中,经常遇到使用高德底图,总是要对高德坐标进行转换才能使用,本章不需要对要素经纬度位置进行转换,而是使用OpenLayers将高德地图图层的所有瓦片从GCJ02坐标进行整体偏移为EPSG:4326和EPSG:3857坐标系来实现。 二…

如何有效实施和推广电子文件管理系统?

随着科技的快速发展,传统的纸质文件管理方式逐渐被电子文件管理系统所取代。电子文件管理系统能够提高工作效率、节省空间和资源,并且有助于保护和维护文件的安全性。 1. 确定需求和目标 在实施电子文件管理系统之前,首先需要明确组织的需求…

TMC Self-Managed 提升跨多云环境安全性

作为云原生技术栈的关键技术之一,Kubernetes 被企业用户广泛试用并开始支撑实际业务应用运行,实现技术先进性带来的生产力提升。但与此同时,随着 Kubernetes 技术的不断广泛与深化使用,企业用户也开始面临诸多技术上的挑战&#x…