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

考点介绍

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

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

答案详情解析和文章内容可点击下方链接即可查看

一、考点题目

1.请你说说em与rem的区别？

解答： 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(
      'content',
      'initial-scale=' +
        scale +
        ', maximum-scale=' +
        scale +
        ', minimum-scale=' +
        scale +
……

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.前端开发入门到实战：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的复杂选择器和简单选择器放到一起比较优先级，会不会晕

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

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

移动端链接：https://m.xiaozhao.vip/dTopic/detail/1193

PC端链接：https://xiaozhao.vip/dTopic/detail/1193