Web前端最全前端响应式布局为什么是个坑？(1)，2024年最新前端跳槽面试必备技巧

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

/>

2.2、媒体查询

媒体查询：Media Queries，是响应式布局的核心，浏览器会根据条件选择需要渲染的html和css内容。多种屏幕设备的宽度主要分为四个区间。

超小屏幕 手机 (<768px)

小屏幕 平板 (≥768px)

中等屏幕 桌面显示器 (≥992px)

大屏幕 大桌面显示器 (≥1200px)

媒体查询有两种引入方式：内部引入和外部引入。

2.2.1、内部引入

/* 手机端样式 */

@media screen and (max-width:768){}

/* ipad终端样式 */

@media screen and (min-width:768px) and ( max-width:992px ){}

/笔记本样式/

@media screen and (min-width:992px) and (max-width:1200px){}

/* 台式机大屏 */

@media screen and (min-width:1200px){}

2.2.2、外部引入

/* 手机端样式 */

/* ipad终端样式 */

/笔记本样式/

/* 台式机大屏 */

注意：

• 使用媒体查询的时候，要把公共样式放到最前边，媒体查询代码放到最后。

• 写媒体查询的时候要按照屏幕从小到大的设置。

• 外层包裹的元素宽度处理要使用百分比。

• 图片缩放处理的时候容易失真，所以尝试给图片添加最大最小的宽度。

三、响应式布局实例

eg：制作一个展示图片的列表，大屏展示一行4张图片，ipad一行展示3张图片，手机一行展示两张图片。