在考虑web页面布局的时候，或者后期与UI、前端同事沟通的时候，经常会被问到“这个页面是定宽页面还是全屏页面？”“针对大小屏幕这个页面如何适配？”“这个页面是使用浏览器的滚动条还是页面内滚动？”本文作者分享了自己的解决方法。

文/冬瓜一号

一、页面宽度：定宽页面or全屏页面？

采用定宽或者全屏。而大部分网站，是需要根据页面内容，才能决定是使用定宽还是全屏。

1.定宽页面

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

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

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

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

2.全屏页面

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

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

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

• 根据屏幕大小等比例放大（或者根据不同的屏幕设定不同的放大/缩小比例）；

• 根据屏幕大小拉宽元素，元素高度不变（大屏下，可能会导致元素比例变形，视觉效果不佳）；

• 根据屏幕大小，增加/减少每行显示的内容多少（多数适合于页面内容为网格布局的情况）；

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

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

二 页面高度

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

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

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

如下示例：由于在 1366 的屏幕下，内容的显示高度除去浏览器的高度以及网站导航的高度，可能只有 650 左右，导致可视区域过小影响用户体验。因此整个页面的布局可能需要重新调整。

三 总结

设计页面时，需特别注意，屏幕大小对页面的影响。否则，会导致整个页面的交互布局需重新设计。另外，具体使用哪种方式，需权衡各自的利弊，最大程度保证大小屏幕下，用户的体验不受影响。

软件开发,网站建设,微信开发,小程序开发,APP开发,商城系统开发,直播系统开发,产品推广,短视频推广,就找易祺互联！
易祺互联为您提供：商城系统,智慧物业管理系统,“好差评”系统,食品溯源系统,智慧点巡检系统,农村电商系统,智慧河道水位监控系统,智慧环境监测系统,机房动力环境监控系统,ERP系统,智能建站系统,商城系统,直播系统,各种软件/网站定制开发,网站托管等一站式运营解决方案。
易祺互联 ＠ 河南蓝燕网络科技有限公司旗下运营品牌
统一社会信用代码：914101055710161107
软件设计部运营中心：河南省郑州市金水区芯互联大厦南座11层
智慧物联网运营中心：河南省郑州市金水区花园路1号河南省人民会堂
新产品培育运营中心：河南省郑州市金水区黄河路25号经津大厦10楼
北京市（华北区）运营中心：北京市海淀区双清路33号清华大学学研大厦B座10层
广州市（华南区）运营中心：广东省广州市黄埔区科汇四街11号
杭州市（华东区）运营中心：杭州市拱墅区祥园路杭州国际人才创新创业中心A座10层
重庆市（西南区）运营中心：重庆市江津区双福新区联东U谷12栋
业务咨询：0371-60934100 手机：18737894979 国内热线：400-8778-670
技术服务：15516975329 投诉热线：185-38935-211