前端面试(7)—你对css sprites的理解,好处是什么?

632 阅读2分钟

是什么 ?
雪碧图也叫CSS精灵, 是⼀CSS图像合成技术,开发⼈员往往将⼩图标合并在⼀起之后的图⽚称作雪碧图。
如何操作?
使⽤⼯具(PS之类的)将多张图⽚打包成⼀张雪碧图,并为其⽣成合适的 CSS。 每张图⽚都有相应的 CSS 类,该类 定义了background-image、background-position和background-size属性。 使⽤图⽚时,将相应的类添加到你的元素 中。
好处:
减少加载多张图⽚的 HTTP 请求数(⼀张雪碧图只需要⼀个请求) 提前加载资源
不⾜
CSS Sprite维护成本较⾼,如果⻚⾯背景有少许改动,⼀般就要改这张合并的图⽚ 加载速度优势在http2开启后荡然⽆存,HTTP2多路复⽤,多张图⽚也可以重复利⽤⼀个连接通道搞定
你对媒体查询的理解?
是什么
媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成,例如宽度、⾼度和颜⾊。媒体查询,添加⾃CSS3,允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪,⽽不必改变内容本身,⾮常适 合web⽹⻚应对不同型号的设备⽽做出对应的响应适配。
如何使⽤?
媒体查询包含⼀个可选的媒体类型和,满⾜CSS3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特 征,最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型,并且所有的表达式 的值都是true,那么该媒体查询的结果为true.那么媒体查询内的样式将会⽣效。 @media (max-width: 600px) { .facet_sidebar { display: none; } }