怎样平衡好页面布局与屏幕分辨率

2022-06-11 分类：网站建设

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

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

为了保证在小屏下，内容可查看完整，因此目前常用的定宽页面尺寸是1200px，实际可能会根据所展示的内容，页面导航，页面其他元素，页面所要适配的终端等，进行调整。比如，简书首页的宽度为960px；京东订单详情为1210px。定宽页面常用于：详情，图片，字段并不多的列表，内容流等。定宽页面虽然可以免去屏幕适配的烦恼，但是对于有些内容，可能会感觉在大屏下显得过于小气，体验并不好，比如图片。而站酷在这一点上，处理的比较好，可以借鉴。当屏幕宽度大于1600时，采用1400的定宽；当屏幕小于1600，使用1150的宽，同时图片大小也会发生改变。（注：淘宝和京东的商品列表页也采用了类似的处理方式）

2.全屏页面全屏页面指，除了页面左右两侧的边界，页面中的内容会随着屏幕大小而撑满。但是为了保证页面内容正常显示，一般会设定最小的适配宽度，页面低于该宽度不再设配，页面出现横向滚动条。全屏页面常用于：网站宣传页、采用左侧导航的管理类网站、字段很多的列表页、需要全屏查看的看板页、使用瀑布流的页面，或者页面中有用户需要可视区域更大才可方便操作的元素，比如地图轨迹等。对于全屏页面，需要考虑，当屏幕变大或者变小时如果适配。

一般常用的适配方式有：根据屏幕大小等比例放大（或者根据不同的屏幕设定不同的放大/缩小比例）；

根据屏幕大小拉宽元素，元素高度不变（大屏下，可能会导致元素比例变形，视觉效果不佳）；根据屏幕大小，增加/减少每行显示的内容多少（多数适合于页面内容为网格布局的情况）；

使用bootstrap等框架，采用响应式布局（根据屏幕大小，改变大小的同时改变元素排版方式）。具体采用哪种适配方式，需根据页面内容，以及内容在大小屏幕下的显示情况，以及整个网站所使用的框架等进行选择。

分享文章：怎样平衡好页面布局与屏幕分辨率
网页地址：https://www.cdcxhl.com/news/166181.html

成都网站建设公司_创新互联，为您提供外贸建站、域名注册、全网营销推广、网站营销、关键词优化、网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容