在设计网页宽度的时候,大家是怎么选择网站整体宽度的?(屏幕分辨率问题)

2014-04-11 11:43:27 +08:00
 hellohacker
现在做了一个网站 由于内容比较多,做成了宽度是1200px,但是在分辨率是1024*768的屏幕下面,会先了难看的底部滚动条,而且头部的一些内容页被遮挡住了,用户提现比较差,想听听大家的建议
4366 次点击
所在节点    程序员
17 条回复
jsonline
2014-04-11 11:49:15 +08:00
默认宽度 960~1000
使用 media query 处理宽屏(>1280)、Pad(768)和手机(480)

.container{
width: 100%;
max-width: 1000px;
@media @wide-screen{max-width: 1280px;}
@media @pad{}
@media @phone{}
}

P.S.
1. 我使用 LESS
2. 我只兼容 IE 8+
botao1
2014-04-11 11:49:33 +08:00
或者选择“固定宽度960px” 这种经典方案
示例: http://960.gs/

或者选择响应式设计,不同分辨率区间不同布局
示例: http://mediaqueri.es/
zakokun
2014-04-11 11:52:13 +08:00
一般都是960的基础分辨率,洋气点的就是响应式了。不过我弄不来只能借助bootstrap...
Keinez
2014-04-11 12:39:29 +08:00
不应该设计固定宽度的布局……
learnshare
2014-04-11 12:59:53 +08:00
960px 还算目前的主流吧,搞得高级一点,可以适配 320, 640, 960, 1200, 2000 吧,media query 响应式是必须的
tension
2014-04-11 13:42:36 +08:00
做成响应式的呗...

@media (max-width: 768px) {
body {
width: 768px;
}
}
coraline
2014-04-11 14:12:01 +08:00
width: ..%; max-width: ..px;

@media
yukirock
2014-04-11 14:43:01 +08:00
爲什麼要 1200px?就算內容再多也不見得要做成這麼寬啊。網站可以給個鏈接讓大家看看嗎?
再說就算是 1200px,也得是 responsive 可以匹配到這一檔,至少得有一個 960 能用的版本吧。
vibbow
2014-04-11 14:53:01 +08:00
@yukirock 1080p屏幕现在也算是主流了的啊,在1920px屏幕上只显示1200px,实际上也并不是那么宽。更何况还有2K屏幕这样的存在。
yukirock
2014-04-11 16:37:27 +08:00
@vibbow

http://www.w3schools.com/browsers/browsers_display.asp

再說 2K 只是存在而已,它才多少份額啊。
lemonlwz
2014-04-11 16:52:59 +08:00
现阶段 1000 是比较合适的选择(pc端)
txlty
2014-04-11 17:45:23 +08:00
即使大屏幕,很多人习惯小窗口看网页。当然是960/980。
learnshare
2014-04-11 17:49:13 +08:00
你们无法理解 2560px 的屏幕看现在的网页有多龌龊...
S1ahs3r
2014-04-11 22:59:22 +08:00
@media 走起,务必不要写死.想想市面上都有4K 这种怪物了..
johnlui
2014-04-12 01:24:12 +08:00
@learnshare 这是13寸rMBP的分辨率,其实一般人调的都是1280*800原始分辨率或者高一点的1440*900,几乎没有人调到最高(MAC)下1920*1200,当然windows进去就默认的2560,吓死人。。。
yakczh
2014-04-12 09:51:53 +08:00
用js得到document.body.clientWidth, 然后判断动态输出相应的布局和尺寸
boogiefer
2014-04-12 12:12:08 +08:00
其实你应该埋点,看看用户数据。现在1280, 1440的显示设备很普遍了。1200可以给设计师更多的发挥余地。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/108105

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX