前端布局方式汇总及概念浅析
前端布局方式汇总:普通/文档流 布局、 Float 布局、绝对布局、Grid 网格布局、CSS3 Flex 弹性盒子布局、静态布局、流式布局、 自适应布局、响应式布局...
一、基础布局方式
0. 普通/文档流 布局
1. Float 布局 float: left/right
2. 绝对布局 position: absolute,position: fixed
3. Grid 网格布局: display:grid
4. CSS3 Flex 弹性盒子布局: display:flex
二、常见的布局概念以及实现方法
0. 静态布局
-
窄屏幕滚动条体验很差
-
宽屏有大片空白，不利于空间利用
1. 流式布局
-
允许网页宽度自动调整：<meta name="viewport" content="width=device-width, initial-scale=1" />
-
不使用绝对尺寸（包括容器/字体/图片），使用百分比、em、rem、vw、vh 等
-
可使用 flex 等弹性盒子（不要使用 px 定尺寸）
-
使用百分比定义，所以在大屏幕的手机/Pad 下（或者横屏下）显示效果会变成有些页面元素被拉的很大，但是内容数量却不变，显得稀疏不紧凑，空间利用率低下。
-
如果文字也按照百分比放大，则整体效果会非常不协调（老人机效果）。
2. 自适应布局
-
静态布局方法
-
分辨率 detector（media query/server-side detector/UA）
3. 响应式布局
三、关于网页设计
1. 响应式设计（RWD）
2. 自适应设计（AWD）
-
server-side detection
-
different versions to different devices
对于 PC: 可使用流式布局；
对于 Mobile: 可使用流式布局。推荐一个 Rem 解决方案：
-
设置元素（可以包括字体等）大小为 rem （rem 是以跟元素font-size为基准的单位）
-
按照屏幕宽度的不同，JS 动态设置 <html> 的 font-size 大小，元素同样会按照屏幕宽度等比例放大缩小
RWD 和 AWD 的异同
-
均针对不同的分辨率/device 采用不同的样式和布局达到页面展示最优
-
布局方式本质没有差别（AWD 也 including responsive layout）
-
前者强调同一套页面多端兼容展示，而后者给出多套页面，对于不同 device 进行了分类处理
-
前者是通过 CSS Media query 进行分辨率检测，可以实时的响应浏览器尺寸变化，改变元素尺寸/布局，而后者一般是 server side detection，一次性渲染既定布局和样式
Reference
-
“Responsive web design”, wikipedia, https://en.wikipedia.org/wiki/Responsive_web_design;
-
“Adaptive web design”, wikipedia, https://en.wikipedia.org/wiki/Adaptive_web_design;
-
《浅谈响应式Web设计与实现思路》, 熊建刚的博客, http://blog.codingplayboy.com/2018/01/06/responsive-web-design/;
-
《Responsive Web Design? Adaptive Web Design? Don’t Despair!》, Elegant MicroWeb, http://www.linkedin.com/pulse/responsive-web-design-adaptive-you-find-hard-decide-dont-microweb;
-
《自适应网页设计(Responsive Web Design)》, 阮一峰的网络日志, http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html;
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
