学习笔记之静态、自适应、流式、响应式四种网页布局区别
来源:互联网 发布:游戏美工需要会什么啊 编辑:程序博客网 时间:2024/05/18 01:01
响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度,不同点是响应式的模板在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套的模板,不过是长度或者图片变小了,不会根据设备采用不同的展示样式,流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载,静态的就是采用固定宽度的了。
静态布局(Static Layout)
即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。
自适应布局(Adaptive Layout)
自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。
你可以把自适应布局看作是静态布局的一个系列。
流式布局(Liquid Layout)
流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
响应式布局(Responsive Layout)
分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
恩恩大概就是这样。
即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。
自适应布局(Adaptive Layout)
自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。
你可以把自适应布局看作是静态布局的一个系列。
流式布局(Liquid Layout)
流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
响应式布局(Responsive Layout)
分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
恩恩大概就是这样。
0 0
- 学习笔记之静态、自适应、流式、响应式四种网页布局区别
- HTML网页布局:静态、自适应、流式、响应式
- 静态、自适应、流式、响应式等布局的区别
- 静态、自适应、流式、响应式四中布局的区别
- 静态、自适应、流式、响应式布局
- 学习笔记之自适应布局
- 静态布局、自适应布局、流式布局与响应式布局的区别
- 自适应网页(响应式布局)+弹性布局
- 响应式布局或自适应网页设计
- 自适应布局,响应式布局以及rem,em区别
- 自适应网页设计 响应式布局 两篇文章
- 响应式网页与自适应网页的区别
- 响应式布局学习笔记
- 响应式布局学习笔记
- 网页设计之响应式布局
- 自适应网页布局
- 网页布局自适应
- 响应式布局,宽度自适应
- linux的which、whereis、locate和find命令
- FCC参阅笔记之编程知识点(上)
- 1619-7 张良 十月一号总结 [连续第一天]
- windows 控制台下运行cl命令
- ext4之内核文档
- 学习笔记之静态、自适应、流式、响应式四种网页布局区别
- Android签名机制
- Broken Clock Codeforces Intel Round-A
- redis常用命令----- redis学习(2)
- Power of Two
- 学习笔记之CSS padding margin border属性详解
- 初入软件工程专业心得
- [BZOJ]1034 [ZJOI2008]泡泡堂BNB (田忌赛马策略贪心)
- request.getParameter();的意思