响应式框架前端面试题及详细答案（实战版）.docxVIP

响应式框架前端面试题及详细答案（实战版）

一、响应式基础核心题

1、什么是响应式布局？和自适应布局有什么本质区别？

参考答案：

响应式布局是一套代码适配PC、平板、手机等所有屏幕尺寸，页面会根据设备视口宽度、分辨率自动调整布局、元素大小、排版结构，核心是一套代码多端适配。

自适应布局是为不同屏幕尺寸单独写几套固定布局，设备切换时只会切换预设的固定版式，页面不会流畅连续变化，核心是多套代码对应多端。

简单总结：响应式是连续动态适配，自适应是断点式固定适配。日常开发中，移动端H5大多用响应式，传统官网常用自适应。

2、实现响应式布局的核心技术有哪些？

参考答案：

开发中最常用的核心技术一共5种，都是实战必备：

1.媒体查询@media：响应式核心，根据不同视口宽度设置不同样式断点；

2.相对单位：rem、vw、vh、百分比，替代固定px，实现元素自适应缩放；

3.Flex弹性布局：自动分配空间、自动换行，适配不同宽度容器；

4.Grid网格布局：快速实现多列响应式网格，适配卡片、列表布局；

5.视口meta标签：移动端适配基础，控制页面缩放、视口尺寸。

3、移动端响应式必须配置的viewport标签是什么？各参数作用？

参考答案：

标准必填代码：

PlainText

metaname=viewportcontent=width=device-width,initi