前端页面布局的建议

Question

自己搭了个博客，前端布局需要自己设计。虽然在自己电脑上看起来很不错，但是换个电脑，比如比自己电脑屏幕窄的或宽的，看起来会位置会乱等效果不是很好。

想寻求布局建议。

现在是想把主要的几个div比如导航和内容的position设置为relative。然后这几个div里面的内容全部用absolute固定了位置，比如内容里的分为博客内容和侧边栏，把博客内容和侧边栏都用absolute固定了位置。

这样做的缺点是如果窄屏将显示不完全，如果太宽的屏幕右边将留出空白。

有没有更好的解决方案？

如果要对手机友好，需要另外考虑哪些因素？

接触的前端设计较少，想请教下高手，先谢谢啦！

Answer 1

页面布局请避免对absolute布局的滥用，原因在于：

• absolute定位会导致当前块对父级高度和宽度塌陷，（浏览器在布局时，父级元素无法直接知道absolute子元素的高和宽），因此这个元素无法撑高父容器。

absolute定位也是兼容性的重灾区：

• absolute定位在IE6、7下有兼容性问题，需要触发haslayout
• 触发完haslayout的块在IE7下有布局bug
• absolute定位在IE6\7\8下的z-index有兼容性问题。absolute定位需要relative定位做辅助，而造成relative定位的滥用，也将会使得z-index的bug难以控制。
• absolute定位在IE6\7下对偏移量解析有兼容性bug
• absolute定位在ie6、7下的影响margin折叠bug，以及另外一个影响margin的bug
• absolute定位在IE6下，不指定left/top，出现的布局bug
• absolute定位在IE6下的奇偶bug：如果定位外框高度/宽度为奇数,则IE6下,绝对定位元素的底定位/右定位会有1像素的误差

楼主的要求是自适应。自适应更要慎用absolute布局。

定位这东西，margin或float定位往往更具有适应性，还轮不到absolute；就算我们确实应该使用absolute绝对定位，在绝大多数情况下，我们是不需要多余同时又不利于维护，留下潜在隐患的relative属性的；就算我们要使用relative相对定位来限制absolute在小范围内的定位，也不应该把relative属性放在最外层的标签上。——张鑫旭《相对定位的最小化影响原则》

当前跨手机和桌面端的页面，主流的布局方案是：弹性布局（流体布局）+media query查询。即：

• 弹性自适应布局（宽度设置为相对父级的百分比 + min-width/max-width）
• 水平方向上的混排使用float/display-inline-block
• 设置视口user-scalable=no
• 针对移动端采用media query做更细的调节

请楼主先看一下常用CSS布局方法，构建页面时粘几个js/css插件，或用几个兼容性堪忧的css3草案属性，难以应对以后的重构。

• 网页布局思想浅议

深入机理，楼主可以读一下：

• float定位与清除浮动①②
• display:inline-block布局

Answer 2

使用栅格系统对前端页面进行排版会达到很好的效果
bootstrap太大了，推荐 http://www.getskeleton.com/

Answer 3

先上网站链接....

个人博客就减少对 IE 低版本的支持吧, 如果为的是效果好, IE 会很头疼的

用 @media query 判断屏幕提供不同的样式, 不过一般用框架就好了

CSS 的 calc 已经获得大多种类的浏览器支持, 应该能帮到非常多, 但很多的 CSS 教程上没更新这点..

另外 CSS 的 flex-box 模型类似,,

Answer 4

position:absolute是不可以滥用的。 页面布局应该使用float一类的属性。 建议从基础的部分开始系统地学习。

Answer 5

你可以看一下 Foundation Font-end Framework，这个对手机比较友好。 http://foundation.zurb.com/

Answer 6

你需要的是responsive design。頁面不好看是因為你不是web designer。