网站首页 > 知识剖析 正文
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38557202/article/details/102750512
一、静态布局
设计:
布局元素居中布局,设置width固定宽度。
二、流式布局
设计:
布局元素宽度使用百分比并使用min-width或max-width限制,高度使用vw并使用min-height或max-height限制使布局元素长宽比一致。
内容元素使用百分比。
使整体布局一致。流式布局代表:栅格系统。
三、自适应布局
设计:
使用媒体查询在不同断点适用不同静态布局。
四、响应式布局
设计:
自适应和流式布局的结合,响应式布局的代表:bootstrap。
五、弹性布局和rem/em布局
设计:
弹性布局使用flex。
rem/em布局使用rem调整各元素尺寸和文字大小,以上以750的设计稿,1rem = 100px,适用于移动端的页面。
总结:
对于需要移动端和pc端的网站,可以使用window.navigator.userAgent,判断访问平台,跳转移动端的站点或pc端的站点。
- 上一篇: 企业级自定义表单引擎解决方案(六)——列表属性设置
- 下一篇: 五种延迟加载图像以提高网站性能的方法
猜你喜欢
- 2024-11-22 SpringBoot与Loki的那些事
- 2024-11-22 Qt的常用控件
- 2024-11-22 C# + Blazor Web入门实战:私人笔记(10)多标签页内容管理
- 2024-11-22 初学者:HTML+CSS静态网页开发——网页布局
- 2024-11-22 力扣 C++11题解系列-083 柱状图中最大的矩形
- 2024-11-22 尝试一下使用 Vitest 进行组件测试,确实很香
- 2024-11-22 uniapp经验-总结1
- 2024-11-22 「CSS」 栅格化布局
- 2024-11-22 C# + Blazor Web入门实战:私人笔记(8)创建分类编辑组件
- 2024-11-22 2.6「HarmonyOS鸿蒙开发」定位布局PositionLayout
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)