PHP技术,PHP研究及学习,Python学习,人工智能,大数据服务

PHP+Python » 前端设计 » 《兼容移动设备的流体布局》有感

《兼容移动设备的流体布局》有感

此文被围观1053日期: 2012-05-08 分类 : 前端设计  标签:  ·······

我们有时候会有这样的设想,能不能有款布局既兼容桌面浏览器,又兼容手持设备的小屏幕?cssgrid.net 提供的方案 给与我们新的思路。

cssgrid.net 的秘密

这个站点自称这个布局为:

A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.

细心的读者可能会发现,这句话其实会有冲突 -- 既然是流体布局,那么怎么限定了宽度呢? 拖动浏览器的窗口宽度,或者使用 iPhone 等设备访问该网站,发现布局会随着宽度的缩小发生改变,从而使页面的内容更容易阅读。它是如何实现的呢?

给力的 @media

如何给不同的设备载入不同的样式,有可能我们首先想到的就是 CSS Hack 。看其的 CSS 载入方式,我们或许就已经能明白个大概。 media 这个属性 这个时候就变得非常的给力。

 


上面的代码可以看出, 1140.css 是布局的主体 。然后,其针对 IE 单独提供了 ie.css,浏览器宽度(或者可以理解为屏幕宽度)为 1024 像素以下、768 像素以上使用 smallerscreen.css;小于 768 像素宽度的则使用 mobile.css。 根据上面定义的典型宽度不难看出,其实 smallerscreen.css 针对的是 iPad 等平板设备,而 mobile.css 针对的是 iPhone 以及 Android 等手机设备。 这是个 CSS 按需加载的好办法。还有个问题就是,可不可以将它们写到单个文件中,节省连接数也方便维护?当然可以。例如:


我们需要写到单个文件中,那么内容使用

@media handheld, only screen and (max-width: 767px) {
    /* ... */
}

包裹起来即可。

宽度的技巧

似乎有些偏题,回到正题我们继续分析 cssgrid.net 的布局。 继续查看 1140.css ,其实可以得知就是个浮动布局。有点不同的是 .row 的样式:

.row {
    width: 100%;
    max-width: 1140px;
}

这种写法当时让我眼前一亮。一般常见的写法是直接使用width:1140px。这样写法的好多多。例如,使用相对宽度、栅格的宽度也对应的使用百分比,那么总体的栅格该起来将会方便很多。

A:「那么 IE6 怎么办?」 B:「别闹了。」

http://files.gracecode.com/2010_11_18/1290068356.jpg顺便说一句,我们目前广泛采用的 960 栅格系统 是否可以考虑革新下。根据目前的用户屏幕分辨率数据(via 黑三 )来看,桌面屏幕宽度大于等于 1024 像素的分辨率占到了绝大多数的比例。 我们可以考虑采用例子中 1140 像素或者更大宽度的栅格系统 -- 这将对于设计以及内容安排方面而言,也将会拥有更大的发挥空间。

One Size Fits All?

说到这里其实这个布局的大部分技术原理也了解了大概,其实如果不喜好浮动布局,了解了上述的原理以后,任何布局我们都可以通过重置样式的方式改进使其支持移动设备。 学习 CSS 的过程中总是会不可避免的会碰到布局的问题,同时这也是争论最多的部分。无论是浮动布局、定位布局、 「伪绝对定位布局」 、还是 「双飞翼布局」 等等,其实都是根据具体的情况而总结出来的布局。 所以,我个人的观点就是,其实没有任何应对各种情况的布局 :^) 那么,您的观点呢?-- EOF --  文章来源:http://www.gracecode.com/archives/3038/

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2018adophper.com All Rights Reserved.