2024年最全前端响应式布局为什么是个坑？，2024最新华为Web前端校招面试题

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

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

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

<meta

name=“viewport”

content=“width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no”

/>

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张图片，手机一行展示两张图片。