前端页面布局的建议

zhjie
  • 1.1k

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

想寻求布局建议。

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

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

有没有更好的解决方案?

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

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

回复
阅读 10.1k
6 个回答

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

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

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

楼主的要求是自适应。自适应更要慎用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草案属性,难以应对以后的重构。

深入机理,楼主可以读一下:

先上网站链接....

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

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

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

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

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

Hunter_Wei
  • 4
新手上路,请多包涵
skywalker
  • -5
新手上路,请多包涵

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

宣传栏