当前位置: 首页 > 建站知识

北京网站制作公司怎样平衡好页面布局与屏幕分辨率?


 一、页面宽度:定宽页面or全屏页面?采用定宽或者全屏。而大部分网站,是需要根据页面内容,才能决定是使用定宽还是全屏。1.定宽页面目前市场上,笔记本常见的屏幕分辨率为1366*768;台式机常见分辨率有1440*900、1920*1080。市场上可能遇到的最低分辨率为1280*768,比如投影仪或者其他设备(其他更小的屏幕可暂不考虑)。为了保证在小屏下,内容可查看完整,因此目前常用的定宽页面尺寸是1200px,实际可能会根据所展示的内容,页面导航,页面其他元素,页面所要适配的终端等,进行调整。比如,简书首页的宽度为960px;京东订单详情为1210px。定宽页面常用于:详情,图片,字段并不多的列表,内容流等。定宽页面虽然可以免去屏幕适配的烦恼,但是对于有些内容,可能会感觉在大屏下显得过于小气,体验并不好,比如图片。而站酷在这一点上,处理的比较好,可以借鉴。当屏幕宽度大于 1600 时,采用 1400 的定宽;当屏幕小于1600,使用 1150 的宽,同时图片大小也会发生改变。(注:淘宝和京东的商品列表页也采用了类似的处理方式)2.全屏页面全屏页面指,除了页面左右两侧的边界,页面中的内容会随着屏幕大小而撑满。但是为了保证页面内容正常显示,一般会设定最小的适配宽度,页面低于该宽度不再设配,页面出现横向滚动条。全屏页面常用于:网站宣传页、采用左侧导航的管理类网站、字段很多的列表页、需要全屏查看的看板页、使用瀑布流的页面,或者页面中有用户需要可视区域更大才可方便操作的元素,比如地图轨迹等。对于全屏页面,需要考虑,当屏幕变大或者变小时如果适配。一般常用的适配方式有:根据屏幕大小等比例放大(或者根据不同的屏幕设定不同的放大/缩小比例);根据屏幕大小拉宽元素,元素高度不变(大屏下,可能会导致元素比例变形,视觉效果不佳);根据屏幕大小,增加/减少每行显示的内容多少(多数适合于页面内容为网格布局的情况);使用bootstrap等框架,采用响应式布局(根据屏幕大小,改变大小的同时改变元素排版方式)。具体采用哪种适配方式,需根据页面内容,以及内容在大小屏幕下的显示情况,以及整个网站所使用的框架等进行选择。二 页面高度当页面内容超出页面高度时,是采用页面滚动条,还是模块内滚动?页面滚动条适合于内容流的页面。这种页面,页面底部固定或底部无其他元素。另外,这种滚动方式需与‘返回顶部’按钮配合使用。当数据需要分页时,多采用滚动分页。模块内滚动,常用于操作需固定在顶部/底部的页面。当页面中有多个模块需要内滚动或者模块被分割的较小时,需考虑在小屏下每个模块的可视区域是否过小而无法进行操作。当数据需要分页时,多采用翻页分页。如下示例:由于在 1366 的屏幕下,内容的显示高度除去浏览器的高度以及网站导航的高度,可能只有 650 左右,导致可视区域过小影响用户体验。因此整个页面的布局可能需要重新调整。 
三 总结设计页面时,需特别注意,屏幕大小对页面的影响。否则,会导致整个页面的交互布局需重新设计。另外,具体使用哪种方式,需权衡各自的利弊,最大程度保证大小屏幕下,用户的体验不受影响。 来源:站长之家 

服务手机:13311381587(丛先生)
服务手机:13381068015(陆先生)
顾问手机:13311215328
售后电话:010-57418103
服务热线:010-58445908 010-58445909
在线咨询:QQ:289216314 QQ:852386267

关于我们 服务项目 建站套餐 知识产权保护 网络营销 新闻中心
公司介绍
人才招聘
支付方式
联系我们
网站建设
网站优化
网站维护
手机网站
域名注册
虚拟主机
中小企业 800元
品牌宣传型 2800元
商城购物型 5000元
行业门户型 8000元起步
800元模板样式
定制网站(价格商议)
三合一建站
商标注册
可信网站
数字证书
400电话
企业邮箱
电子邮箱营销
短信营销
S E O
新闻中心
行业动态
建站知识
网站优化
网站推广

版权所有: © 2004-2020 北京华大网络  本站法律顾问:王兰胜律师  
Copyright ©北京天地华大网络技术有限公司 All rights reserved.
建站咨询提交邮箱:E-mail: service@huadanet.com
售前咨询QQ:289216314 (周一至周日) QQ:852386267 QQ:1161599822 QQ:1158330146(周一至周日)
售后服务QQ:852386267 售后电话:010-57418103
业务合作:hd360@126.com | 域名空间:1161599822@qq.com| 求职发送:job@huadanet.com | 技术在线QQ:1161599822
华大网址:www.huada360.cn www.huada360.com.cn www.huada360.com www.huadanet.cn www.hd360.cn www.bj360.com
华大网络地址:北京海淀区上地软件园广场辉煌国际2-1705
业务电话:  010-58445909 |13331088403 (周小姐) | 13381068015(陆先生) |  13311215328 (丛先生)周一至周日
业务手机:13311381587(丛先生) | 010-58445908 | 010-62826832 |  010-57220468 (周一至周日)
意见及投诉电话:13311381587
[北京华大网络旗下网站]
京ICP备05001314号
京公网安备110106003638号
北京网站建设公司 北京域名注册 建站 企业建站 北京网站建设公司 北京网站制作报价 北京网站建设公司 北京网站制作

  北京网站制作报价    北京网站建设公司    北京网站制作公司    北京建站    北京APP开发公司    北京建网站需要多少钱    北京app开发外包公司    北京网站建设公司报价    手机APP定制开发    北京网站建设公司    北京网站制作公司    网站制作报价    网站建设北京    微信网站搭建多少钱费用    北京网站建设公司    北京网站制作报价    北京网页建设公司    北京网站制作公司    北京建站    北京建站多少钱    网站建设报价    北京网站建设公司    北京个人建站    网站制作    北京大型网站制作    北京手机网站制作报价    辽宁网站制作报价    门头沟少儿英语培训    北京建站公司    网站制作    北京网站制作哪家好    北京手机网站制作报价    微信小程序开发    北京手机建站费用    手机网站建设制作