浅谈网页设计中的响应式布局

  在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型:

  布局类型

浅谈网页设计中的响应式布局

  布局实现

  采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局、可切换的固定布局、弹性布局、混合布局。

固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;

可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局;

弹性布局:以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;

混合布局:同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。

浅谈网页设计中的响应式布局

  可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式:其中可切换的固定布局的实现成本最低,但拓展性比较差;而弹性布局与混合布局效果具响应性,都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计,需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。

浅谈网页设计中的响应式布局

  布局响应

  对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计);

  无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点),

  我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式:

  布局不变,即页面中整体模块布局不发生变化,主要有:

模块中内容:挤压-拉伸;

模块中内容:换行-平铺;

模块中内容:删减-增加;

浅谈网页设计中的响应式布局

浅谈网页设计中的响应式布局

浅谈网页设计中的响应式布局

  布局改变,即页面中的整体模块布局发生变化,主要有:

模块位置变换;

模块展示方式改变:隐藏-展开;

模块数量改变:删减-增加

浅谈网页设计中的响应式布局

浅谈网页设计中的响应式布局

浅谈网页设计中的响应式布局

  很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。

以上就是浅谈网页设计中的响应式布局的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3195298.html

(0)
上一篇 2025年4月1日 02:26:06
下一篇 2025年4月1日 02:26:22

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vscode中如何开启控制台并切换布局

    如图所示,在vscode“查看”菜单中便有这两个选项 如图,这样vscode的终端面板就会打开了,点击其他三个菜单可以切换面板 vscode切换布局默认是切换成垂直布局的,这样就可以同时查看多个页面 我们可以在“查看”菜单里边切换成水平的(…

    2025年4月2日 编程技术
    200
  • Vue 中如何实现可拖拽的布局?

    随着web前端技术的不断发展,越来越多的开发者开始采用spa(single page application)架构的方式构建应用程序。vue作为目前最流行的web前端框架之一,提供了丰富的组件库和工具,可以更方便地构建spa应用。在实现可拖…

    编程技术 2025年4月1日
    100
  • Photoshop CS3 友基绘影2数位板绘图实例

      本photoshop教程是关于绘制中国城池插画,绘制效果是一个中国风城池概念设计稿,主要要注意画面整体布局还有光影处理问题,教程适合有一定绘画基础的网友参考学习。  工具:photoshop cs3软件、友基绘影2数位板  相关文章:p…

    2025年4月1日
    100
  • 响应式网页设计9个要点

    响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难。没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去,因为越来越多的设备都可以打…

    编程技术 2025年4月1日
    100
  • 分享三个div+css页面布局教程及2个注意事项

    我们学习html和css就是为了制作网页,所以网页的布局和样式就显得非常重要了,它关系到页面的美观。本篇文章我就总结了有关div+css布局的相关内容: 1.韩顺平 2016年最新div css 基础视频教程 《韩顺平 2016年最新div…

    2025年4月1日 编程技术
    100
  • css3 中最出色的功能–flex 布局

    flex 布局是 css3 中使用最频繁也是最出色的功能,有点复杂,分为应用在容器上的属性和项目上的属性,即父元素上的与子元素上的属性。 父元素上的属性 display: flex div{display: flex; background…

    2025年4月1日 编程技术
    100
  • web前端教程之CSS 布局实例

    CSS布局 布局是css中一个重要部分,本文总结了css布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单列布局、多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小伙伴带来一些帮助。 目录 1…

    2025年4月1日 编程技术
    100
  • 双飞翼布局的改造使用详解

    box-sizing + margin负值 升级双飞翼布局 一、box-sizing属性 .content-size, .border-size{width: 200px;height: 100px;padding: 10px;border…

    2025年4月1日
    100
  • Sticky footer布局是什么?

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块、内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布。当页面内容较多时,页脚能随着文档流自动撑开,显示…

    2025年4月1日
    200
  • 响应式布局之弹性布局的介绍

      响应式布局的实现是前端工程中一个非常大的跨越,它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力。就今天这个机会,我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局。   弹性布局是一种十分方便的,只需要依…

    2025年4月1日
    100

发表回复

登录后才能评论