mainbanner1.jpg

深圳SEO公司-非尔思科技
当前位置:首页>>新闻资讯>>网站制作

网站建设页面布局和分辨率的关系

来源:长沙高端网站制作时间:2019-12-05 09:57:16浏览量:139 次

为了保证在小屏下,内容可查看完整,因此目前常用的定宽页面尺寸是1200px,实际可能会根据所展示的内容,页面导航,页面其他元素,页面所要适配的终端等,进行调整。比如,简书首页的宽度为960px;京东订单详情为1210px。

  1、定宽页面

  目前市场上,笔记本常见的屏幕分辨率为1366*768;台式机常见分辨率有1440*900、1920*1080。市场上可能遇到的更低分辨率为1280*768,比如投影仪或者其他设备(其他更小的屏幕可暂不考虑)。

  为了保证在小屏下,内容可查看完整,因此目前常用的定宽页面尺寸是1200px,实际可能会根据所展示的内容,页面导航,页面其他元素,页面所要适配的终端等,进行调整。比如,简书首页的宽度为960px;京东订单详情为1210px。

  定宽页面常用于:详情,图片,字段并不多的列表,内容流等。

  定宽页面虽然可以免去屏幕适配的烦恼,但是对于有些内容,可能会感觉在大屏下显得过于小气,体验并不好,比如图片。而站酷在这一点上,处理的比较好,可以借鉴。当屏幕宽度大于1600时,采用1400的定宽;当屏幕小于1600,使用1150的宽,同时图片大小也会发生改变。(注:淘宝和京东的商品列表页也采用了类似的处理方式)

  

网站制作


  2、全屏页面

  全屏页面指,除了页面左右两侧的边界,页面中的内容会随着屏幕大小而撑满。但是为了保证页面内容正常显示,一般会设定最小的适配宽度,页面低于该宽度不再设配,页面出现横向滚动条。

  全屏页面常用于:网站宣传页、采用左侧导航的管理类网站、字段很多的列表页、需要全屏查看的看板页、使用瀑布流的页面,或者页面中有用户需要可视区域更大才可方便操作的元素,比如地图轨迹等。

  对于全屏页面,需要考虑,当屏幕变大或者变小时如果适配。一般常用的适配方式有:

  根据屏幕大小等比例放大(或者根据不同的屏幕设定不同的放大/缩小比例);

  根据屏幕大小拉宽元素,元素高度不变(大屏下,可能会导致元素比例变形,视觉效果不佳);

  根据屏幕大小,增加/减少每行显示的内容多少(多数适合于页面内容为网格布局的情况);

  使用bootstrap等框架,采用响应式布局(根据屏幕大小,改变大小的同时改变元素排版方式)。

  具体采用哪种适配方式,需根据页面内容,以及内容在大小屏幕下的显示情况,以及整个网站所使用的框架等进行选择。

  3、页面高度

  当页面内容超出页面高度时,是采用页面滚动条,还是模块内滚动?

  页面滚动条适合于内容流的页面。这种页面,页面底部固定或底部无其他元素。另外,这种滚动方式需与‘返回顶部’按钮配合使用。当数据需要分页时,多采用滚动分页。

  模块内滚动,常用于操作需固定在顶部/底部的页面。当页面中有多个模块需要内滚动或者模块被分割的较小时,需考虑在小屏下每个模块的可视区域是否过小而无法进行操作。当数据需要分页时,多采用翻页分页。


相关推荐

您有网站建设及seo优化外包需求?即刻联系一站式网站建设seo优化推广公司吧!

立即咨询

二维码图片

全国客户服务热线

18923729070 王先生

    Copyright © 非尔思网络  长沙seo热点  长沙seo seo百科  百度站长平台    备案号:湘ICP备16027790号-3  交换友链的QQ:123317951 (添加时备注友链)

top.png