面试题三、CSS响应式及原理

赵花花5070

已于 2023-02-08 14:42:50 修改

阅读量144

点赞数

分类专栏： CSS / CSS3 面试题汇总文章标签： css 前端 html

于 2023-02-08 14:42:20 首次发布

本文链接：https://blog.csdn.net/weixin_42728767/article/details/128933250

版权

CSS / CSS3 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

面试题汇总

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

前言

同学，你在面试的时候是否总是遇到如下问题：

什么是响应式？
css响应式原理是什么？
有哪些方式可以实现响应式，及他们各自有什么缺点？

带着上面的问题，开启今天的日志笔记。

响应式

媒体查询（@media）, rem, em, vw, vh这些算是响应式吗？我个人觉得这只能算是实现响应式的工具，那什么是响应式呢？在我的理解中，通过使用这些工具，让显示界面能够在不同尺寸的设备（PC端，移动端，超大屏幕）中正常显示，实现界面自动适配，这才是响应式。

媒体查询

媒体查询可以根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width、 height和 color（等）。使用媒体查询，可以让界面在不同设备中显示不同界面。

使用方法

link引入

<link media="sereen and (min-width: 900px)" rel="stylesheet"  href="demo_style.css" />

style样式中使用

<style>
@media screen and (min-width: 300px) and (max-width: 600px){
  .class {
    display: none;
  }
}
</style>

以上方式，就是项目中比较常用的，如果想要更深入的学习，可以前往查看更多更全的关于媒体查询信息。

rem

我们在编写网页时，往往需要兼顾网页在不同屏宽情况下的显示，而有时为了省事，没时间写新的页面，也为了兼容考虑，这就需要使用等比压缩，
等比压缩的核心是rem。

我们常常在使用rem的时候都习惯性的会在样式头部写上如下一段：

html, body{
	font-size: 62.5%;
}

那么你知道为什么要写上这么一段吗，62.5%是怎么来的呢？

rem是css3中新增加的一个单位属性，全称: font size of the root element。

rem的在现代桌面浏览器上的默认初始值是16px（即1rem = 16px）。

我们在开发的过程中，UI设计一般都是给到的单位是像素，那么项目中要使用rem，就需要进行一个转换。
例如：

.boxStyle{
	width: 80px;
	height: 80px;
}

将上面的样式转换为rem

.boxStyle{
	width: 80 / 16 + rem;
	height: 80 / 16 + rem;
}

/* 上面的这段代码是有问题的哈，不必过于深究 */

很明显，上面的样式计算是一个问题，不可能每次都要掏出手机，计算器来进行计算吧，那样多麻烦啊。
有人不服气了，那可以使用pxtorem插件啊，这个不需要人工转换，自动就能够实现转换。但是我想说的是，同学你说的没错，但是我们这里谈论的是px 与 rem之间的转换原理，那只不过是一个实现工具，而我们现在记录的是理论原理。

为了方便开发者计算，所以大部分都以10整除是不是就更方便了，不管你设计给的是多大的像素（px），我都给你除以 10，这么转换是不是更加清晰明了。那么这个 10 是怎么来的呢？浏览器默认的都是16px，现在需要转化为10px，这不挺简单的嘛。

反推转换率：

10 / 16 = 0.625

所以 16 * 62.5% = 10

这也就是为什么要在根目录下html,body设置样式字号为62.5%的原因了

请看如下正确使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html,body{
            font-size: 62.5%;
        }

        div:first-child{
            font-size: 8rem;
        }

        div:last-child{
            font-size: 80px;
        }

    </style>
</head>
<body>
    <div>11111</div>
    <div>11111</div>
</body>
</html>

通过上诉demo，可以很明显的看到，设置8rem和设置80px在界面中达到的展示效果是一模一样的。

em

rem是相对于根节点的font-size计算
em是相对于父节点的font-size计算

请看如下示例:

在这里插入图片描述
请看这是字号8rem下界面文字展示的高度，如果我稍微给修改一下，使用em，那么请看会是什么效果。

此时请看，父级设置为8rem，子级设置为3em，从界面的高度可以看到有什么区别？

之前没有子级，设置8rem为105.6，现在同样父级设置为8rem，子级设置为3em, 此时的文字高度为316.8，是不是就刚好是10.6的3倍呢。所以就由此可以得出一个结论：

1em等于父节点的大小

此处就是 1em等于 8rem

所以 em 是根据父节点的font-size进行计算是正确的。

当人我们实现响应的方式还有，比如说通过js进行计算，vw,vh， vw/vh + rem 组合式等方式都可以实现不通设备间响应式配置。

缺点

媒体查询
media query媒体查询设置多个不同的尺寸是一个范围，在当前范围内切换是没有响应式效果，在切换到另一个范围的瞬间时，会明显有一个卡顿的感觉，这给用户的体验不是很好，但是一般情况不会，因为pc，移动端为各自独立的视口，影响不是很大，只有在同一个设置视口进行浏览器切换才会出现上述卡顿的问题。
rem, em
通过rem来进行计算，样式代码复杂冗余，调试不方便。
js
多了js的代码，一直监听页面的尺寸变化浪费资源，而且和css有耦合。
vw
如果屏幕很大或很小，视觉效果就会很差，因为元素大小是根据视口宽度的变化而相应变化。