查看: 2556|回复: 0

静态、自适应、流式、响应式四种网页布局有什么区别?

[复制链接]
  • TA的每日心情
    开心
    2017-12-5 10:32
  • 签到天数: 1 天

    [LV.1]初来乍到

    3

    主题

    15

    帖子

    94

    积分

    注册会员

    Rank: 2

    积分
    94
    发表于 2015-11-6 15:22:37 | 显示全部楼层 |阅读模式
    响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度,不同点是响应式的模板 在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套的模板,不过是长度或者图片变小了,不会根据 设备采用不同的展示样式,流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载,静态 的就是采用固定宽度的了。
    静态布局(Static Layout)
    即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
    对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。
    自适应布局(Adaptive Layout)
    自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。
    你可以把自适应布局看作是静态布局的一个系列。
    流式布局(Liquid Layout)
    流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
    响应式布局(Responsive Layout)
    分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。
    可以把响应式布局看作是流式布局和自适应布局设计理念的融合。


    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-4-19 00:33 , Processed in 0.062667 second(s), 28 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表