乐趣区

关于css:想要学好前端必须理解的布局方式响应式布局

响应式布局

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

什么是响应式布局?

在不同屏幕分辨率下,可能以最佳的形式进行展现,元素的宽度尺寸以及展现形式可能会扭转。通常应用 @media 多媒体查问来实现响应式布局。

长处

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

毛病

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

场景

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


根底案例

以下简略模仿一个响应式布局,在不同设施 / 分辨率下实现不同的展现成果。

容器尺寸 640px * 320px

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

容器尺寸 150px * 320px

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


最全面的前端笔记来啦,蕴含了入门到入行的笔记,还反对实时成果预览。小伙伴们不须要再花工夫去写笔记,或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览,深色和浅色模式。

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

退出移动版