联享懂营销的专业网站设计制作公司

企业网站的网页布局方式

2022-08-18 围观热度 127网站专题
    布局方式,本质上就是去处理窗口宽度与网页内容的关系。用户会使用浏览器打开不同尺寸的窗口宽度,而网页内容究竟应该如何去适应这些窗口尺寸?网页布局通常会分为:固定布局、流式布局、自适应布局、响应式布局。
    1. 固定布局
    固定布局是一种最为简单的方式,它的设计逻辑是将页面当中的内容 “写死固定” 在屏幕上,内容不会随着本身窗口宽度进行改变,所有元素都使用 px 作为基础单位。当然在固定布局当中,窗口大小与页面内容会存在两种基本关系:窗口过大则将页面元素进行居中,窗口过小则展示横向滚动条。固定布局的好处是这种方式相对简单,只需将页面设计好即可,不会存在太多兼容性的问题,固定布局通常出现在 老旧的政府项目、网页的登录注册中。

    2. 流式布局

    流式布局是最基础的变化布局,它的设计逻辑是将页面当中的元素设计成可以流动的 “水” ,通过在页面,设计不同的“杯子”容器来装下页面内容,这里的“水”一般指的是 文字、图标、以及一些页面重复出现的元素。而杯子通常是我们设计的容器,它高度固定,只会变化其宽度,比如卡片、外层容器控制宽度等等。因为“杯子”的限制,也就导致水会根据杯子的宽度进行延展流动,进而形成流式布局。使用流式布局可以通过较低的开发成本,来实现一个页面当中多尺寸的小范围适配,如果屏幕尺寸跨度较大,则会比较困难,而流式布局最常使用的方式就是通过栅格系统,来确定整个“杯子”的宽度,进而让“水”能够在页面当中实时滚动展示,这里有两个需要注意的点:
    在研发层面,杯子的大小是需要进行限制的,通常会去设定它的最大值与最小值,当它超过最大值则居中对齐,当他在流式布局当中,窗口超过其最大值则固定左侧,右侧空白补充;窗口小于其最小值则展示横向滚动条。
    流动的“水” 需要去考虑它漫出的情况,即在“水杯”高度固定的情况下,整个宽度无法装下如此多“水”的情况,通常我们可以使用 “…” 进行标注。这个思路后续在响应式布局当中也会体现。
    3. 自适应布局
    自适应布局是将差别较大的屏幕尺寸,去创建多个不同的设计稿,每一个设计稿去对应 一个用户实际的尺寸范围。改变屏幕分辨率就可以去切换不同的设计方案。通俗一点来说,自适应就是去单独设计桌面端、平板端、移动端的页面,并且将它们三者进行独立,而系统通过不同尺寸间的 屏幕断点/浏览器 UA 等进而适应出不同的设计页面。
自适应主要是表达多个设备尺寸下进行切换的 布局方式,在不同的设备之间,也是需要去使用流式布局以及其他布局方式,而不同的设备之间,屏幕分辨率的差异就会涉及到一个关键点,屏幕断点。
    屏幕断点,屏幕断点,又叫媒体查询 @media,因为在整个设计当中,屏幕尺寸是极其复杂的,除了我们常见的尺寸:1920、1080、1440、1366,用户还可以通过调整窗口的大小,进而改变网页尺寸。而屏幕断点,最主要是判断屏幕的宽度,来确定目前的尺寸究竟应该采取什么设计方案。关于屏幕断点的媒体查询,是在前端 CSS3 代码当中,提供给用户校验整个屏幕的宽度。而确定断点才是这其核心,这里给大家提供两个思路,实际设计当中还会更为复杂:
    物理断点:也就是屏幕当中,已经划分好的断点方式,比如显示器的全宽大小、不同设备之间的屏幕分辨率差异,
    设计断点:在设计过程当中,一些必要的屏幕尺寸。比如上方讲到不同平台的设计问题。
    其实屏幕断点不是最终目的,最终还是想通过屏幕断点,将页面当中不同的不同元素的处理方式实现在设计稿中,如果不需要,完全可以不考虑增加屏幕断点。
    4. 响应式布局
    响应式布局是确保一个页面当中所有的设备(桌面端、平板端、移动端)都能够展示出非常满意的效果,进行产生的一种技术方案。它更像是 流式布局与自适应布局的结合,它能够通过对屏幕尺寸的快速响应,进而对页面的内容进行更为细致的变化。通俗一点来说就是通过一套代码去实现多个页面,并且将多个页面的内容进行细化,进而能够快速适配多个设备。


  • 7x24

    全国售后支持123

  • 14

    14年行业服务经验

  • 26

    全国售后支持

  • 200

    超百人设计、研发团队

  • 2

    服务企业客户2万家

  • 9

    连续9年守合同重信用企业

关于我们
广州联享信息科技有限公司成立于2011年,是成熟的企业互联网解决方案服务商。致力于帮助每个企业实现互联网智能经营。截止目前,联享科技在全国设有26家分公司,拥有员工200余人,总公司现设有客服事业部、运营事业部、网络事业部、行政事业部四大职能部门...
联享科技已覆盖互联网主要城市
目前总部设立于广州,并在深圳、上海、北京、杭州、长沙、武汉、郑州、石家庄等全国26座城市设有分公司及30余家核心城市代理,更多城市正在筹建中,敬请期待

Copyright © 2007-2022 联享信息科技有限公司(a020.cn)版权所有

常年法律顾问:广东梵意律师事务所 周乙飞律师(主任)