想要学好前端必须理解的布局方式------响应式布局

响应式布局

原文链接：https://note.noxussj.top/?source=sifou

什么是响应式布局？

在不同屏幕分辨率下，能够以最佳的方式进行展示，元素的宽度尺寸以及展示方式可能会改变。通常使用 @media 多媒体查询来实现响应式布局。

优点

页面能够兼容不同分辨率的屏幕。

缺点

工作量大，UI 需要设计多个平台的版本。

场景

一套代码兼容 web 端、平板、以及手机端网页

---

基础案例

以下简单模拟一个响应式布局，在不同设备/分辨率下实现不同的展示效果。

容器尺寸 640px * 320px

当分辨率较大时可采用一行多个元素的形式。

容器尺寸 150px * 320px

当分辨率过小时采用一行一个元素的形式。

---

最全面的前端笔记来啦，包含了入门到入行的笔记，还支持实时效果预览。小伙伴们不需要再花时间去写笔记，或者是去网上找笔记了。面试高频提问和你想要的笔记都帮你写好了。支持移动端和 PC 端阅读，深色和浅色模式。

原文链接：https://note.noxussj.top/?source=sifou