自己搭了个博客,前端布局需要自己设计。虽然在自己电脑上看起来很不错,但是换个电脑,比如比自己电脑屏幕窄的或宽的,看起来会位置会乱等效果不是很好。
想寻求布局建议。
现在是想把主要的几个div比如导航和内容的position设置为relative。然后这几个div里面的内容全部用absolute固定了位置,比如内容里的分为博客内容和侧边栏,把博客内容和侧边栏都用absolute固定了位置。
这样做的缺点是如果窄屏将显示不完全,如果太宽的屏幕右边将留出空白。
有没有更好的解决方案?
如果要对手机友好,需要另外考虑哪些因素?
接触的前端设计较少,想请教下高手,先谢谢啦!
你需要的是responsive design。頁面不好看是因為你不是web designer。
先上网站链接....
个人博客就减少对 IE 低版本的支持吧, 如果为的是效果好, IE 会很头疼的
用 @media
query 判断屏幕提供不同的样式, 不过一般用框架就好了
CSS 的 calc
已经获得大多种类的浏览器支持, 应该能帮到非常多, 但很多的 CSS 教程上没更新这点..
另外 CSS 的 flex-box
模型类似,,
页面布局请避免对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布局
position:absolute是不可以滥用的。 页面布局应该使用float一类的属性。 建议从基础的部分开始系统地学习。
你可以看一下 Foundation Font-end Framework,这个对手机比较友好。 http://foundation.zurb.com/
使用栅格系统对前端页面进行排版会达到很好的效果
bootstrap太大了,推荐 http://www.getskeleton.com/