無標題文檔

兼容移动设备的流体布局

我们有时候会有这样的设想,能不能有款布局既兼容桌面浏览器,又兼容手持设备的小屏幕? 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 这个属性 这个时候就变得非常的给力。

<!-- The 1140px Grid --> 
<link rel="stylesheet" href="css/1140.css" type="text/css" media="screen" /> 

<!--[if lte IE 9]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]--> 

<!-- Make minor type adjustments for 1024 monitors --> 
<link rel="stylesheet" href="css/smallerscreen.css" media="only screen and (max-width: 1023px)" /> 

<!-- Resets grid for mobile --> 
<link rel="stylesheet" href="css/mobile.css" media="handheld, only screen and (max-width: 767px)" /> 

上面的代码可以看出, 1140.css 是布局的主体 。然后,其针对 IE 单独提供了 ie.css,浏览器宽度(或者可以理解为屏幕宽度)为 1024 像素以下、768 像素以上使用 smallerscreen.css;小于 768 像素宽度的则使用 mobile.css。

根据上面定义的典型宽度不难看出,其实 smallerscreen.css 针对的是 iPad 等平板设备,而 mobile.css 针对的是 iPhone 以及 Android 等手机设备。

这是个 CSS 按需加载的好办法。还有个问题就是,可不可以将它们写到单个文件中,节省连接数也方便维护?当然可以。例如:

<!-- Resets grid for mobile --> 
<link rel="stylesheet" href="css/mobile.css" media="handheld, only screen and (max-width: 767px)" /> 

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

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

包裹起来即可。

宽度的技巧

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

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

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

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

https://files.gracecode.com/2010_11_18/1290068356.jpg

顺便说一句,我们目前广泛采用的 960 栅格系统 是否可以考虑革新下。根据目前的用户屏幕分辨率数据(via 黑三 )来看,桌面屏幕宽度大于等于 1024 像素的分辨率占到了绝大多数的比例。

我们可以考虑采用例子中 1140 像素或者更大宽度的栅格系统 -- 这将对于设计以及内容安排方面而言,也将会拥有更大的发挥空间。

One Size Fits All?

说到这里其实这个布局的大部分技术原理也了解了大概,其实如果不喜好浮动布局,了解了上述的原理以后,任何布局我们都可以通过重置样式的方式改进使其支持移动设备。

学习 CSS 的过程中总是会不可避免的会碰到布局的问题,同时这也是争论最多的部分。无论是浮动布局、定位布局、 「伪绝对定位布局」 、还是 「双飞翼布局」 等等,其实都是根据具体的情况而总结出来的布局。

所以,我个人的观点就是,其实没有任何应对各种情况的布局 :^)

那么,您的观点呢?

-- EOF --

IE8 的 noscript 标签 Bug

「没 Javascript 就会死」的页面通常都会加入 noscript 标签用于提示用户开启脚本支持。 然而在 IE8 下,如果在 noscript 标签上设置了 background-color 或者* border* 样式,则无论脚本是否开启 IE8 还是会将其显示(还只是显示轮廓,并不显示内容)。

期前也碰到过这样的问题,不过当时 IE8 处于 RC 中,所以我直接使用脚本将其 display:none; 绕 过了这个问题。今天又在 positioniseverything.net 上看见了这个 Bug ,测试了下 Win7 RTM 上的正式版 IE8 ,发现还是存在这一问题,Sucks~

https://files.gracecode.com/2009_11_05/254127e70a0b.jpg

目前能想到的解决方案就是不要在 noscript 直接定义样式,可以其内部包含个 div 等块元素控制其具体样式。

IE8 正式版本推出将近半年,Buglist 也越来越完善,不知道这是件好事还是件坏事 :^(

-- EOF --

在 Explorer6 下调试 CSS(草译)

原文连接在这里 ,主要介绍原作者的针对 Explorer6 调试 CSS 的一些经验。不过在我个人看来,这也是一般性的 CSS 调试方法。

防患于未然

坦白的讲,我每天都会话很多时间用于调试 Explorer6 的 CSS 问题上。下面是一些小 Tips 可以确保 Explorer6 最大限度的返回你期望的效果。不幸的是,并不是每个人都知道它们(译注:作者有些「危言耸听」)。

重置默认样式

重置默认样式可以最大限度的避免浏览器差异,最简单的样式重置通常可以这样写

* {
    margin: 0;
    padding: 0;
}

如果你觉得这样「太过于简单」,可以参考 YUI ResetEric Meyer's Reset

不要在同一元素上同时声明 margin/padding 的宽度

由于 Explorer6 糟糕的 盒模型 ,你必须要万分小心。如果你需要将一元素设置了宽度,注意避免再将其上设定margin、padding(左边或者右边)。我会在其上再包裹一层元素,比如 <p>、<ul>、<table>、<hr>这样的标签。

在大多数情况下,设计师会统一同一种元素的样式,比如段落的内间距(padding)统一为 8px 到 20px(通常为 10px)

p {
    padding: 0 10px;
}

这是个非常好的定义。

另外:我一直使用像素(pixels)作为 margin 和 padding 的单位,因为如果使用 em,那么可能在使用不同的字体造成不同的宽度差异。

校验 XHTML、HTML

我已经好几次遇到这样的问题,在 Firefox 和 Safari 显示完好的页面,却在 Explorer6 下显得惨不忍睹。如果 Explorer7 也出现了这样的问题,那可能是遗失了「<」或者「>」之故。为了些可预见性的问题,其他浏览器都会注意这个问题,唯独 Explorer 。

我经常使用 Firefox 的 HTML validator 插件 验证页面代码。

保持清除浮动

总会有页面要将某个元素浮动起来,如果是定宽的那么还好办。如果是不定宽度的,那么要清除下浮动 -- 毕竟其他元素不一定都是浮动的。总之,时刻记得清除浮动是个好的习惯(译注: 也可以参看我以前的文章 )。

调试的技巧

虽然有多年针对 Explorer6 的 CSS 调试经验,一些常见的问题我知道如何去解决,但真的碰到很头痛的问题时,那时我通常会这样解决

  1. 打开电脑,载入 Explorer6 (译注:废话 -_-!)
  2. 确保安装了 IE Accessibility 工具条
  3. 点击工具条上的「编辑 CSS」
  4. 然后我开始「变魔术」

寻找错误

设定背景色

我经常会在指定的大块元素上设定个背景色

#content {
    background-color: red;
}

#sidebar {
    background-color:blue;
}

这能让我知道是哪块元素出了问题(译注:我喜欢用「red」高亮,因为好打而且显眼)。

隐藏元素

然后开始逐级的隐藏该块元素中的内容,首先是最大的块

#sidebar {
   display: none;
}

如果问题消失了,那么再逐级在块中寻找出问题的元素,比如

#sidebar .sub-item {
    display: none;
}

或者

#sidebar .sub-item .sub-sub-item {
    display: none;
}

使用这一方法,通常就能精确的定位哪个元素造成的问题(按照经验通常是 <div> 或者是 <p>)。

寻找解决方案

Explorer6 是头「烈马」,它会按照自己的规则去渲染 CSS 。当找到对应的元素后,下面有些经验式的解决方案可以参考一下(保持原作、顺便偷懒就不翻译了)

#sidebar .sub-item .sub-subitem {
    /* try setting this if it’s not already set - it sometimes works wonders */
    position: relative;

    /* display: inline often fixes the double margin float bug and */
    display: inline;
             
    /* Sometimes this just fixes problems - no idea why */
    display: inline-block;

    /* margin can be a killer so take it off completely see if the problem goes away */
    margin: 0;

    /* same as margin */
    padding: 0;

    /* Sometimes IE6 hates background colours not being declared */
    background-color: transparent;

    /* can sometimes stop columns too wide from breaking a layout */
    overflow: hidden;

    /* Sometimes forces hasLayout and fixes things */
    zoom: 1;
}

我经常会碰到改变它的 margin 和 display 就能解决问题。然后我会使用 Google 搜索网上是否有相应的 Bug 记录。

解决问题

当我找到解决该问题的办法以后,通常我会将其放到名为 ie6.css 文件中,然后只让 Explorer6 载入该 CSS 。当然,要确定该样式会覆盖原先定义的样式。

译注:当然也可以使用 CSS Hacks ,但不推荐这样做,原因之一是要「 保持 CSS 简单 」。

// 鲜果认领 BANGD5F9111B31CF304E38747370XIANGUO

import vs link

对于 CSS 的载入方式,在这里咬文嚼字下。这篇主要探讨 CSS 的两种载入方式:@import 和 link 元素间的差异。

link 是在 (X)HTML 文档中的语义是「 页面资源 」(当然也会包括 CSS),而 @import 只是 CSS2.1 的语句。

使用 @import 可以使各 CSS 文件间相互嵌套。在 Explorer5.x 时代, 同时也是浏览器间判断是否支持 CSS2.1 的一个方法

其实,我们最关注的是 @import 和 link 两种不同的 CSS 载入方式的性能问题。先写了两个简单的脚本,让 CSS 文件延时 5 中载入,可以在各浏览器下看看结果 使用 @import 使用 link

可以看见,Exploer 系列在使用 @import 方式时,会先载入文档,然后再载入样式;而在其他浏览器以及其他情况下,都需要等待样式载入完毕以后统一渲染。

总结下我个人的看法。我个人倾向于使用 link 方式,主要是下面的几个原因

  1. CSS 文件也是页面资源的一部分(更佳的语义)
  2. 没有各浏览器间的载入分歧
  3. 便于 Javascript 操作(link 是 HTML 结构的一部分,而 @import 载入的只能操作 style 节点)

当然,应用 @import 的场合也很多,比如在无法更改页面结构、或者是需要统一的 CSS 入口的情况下等。

参考阅读

我的栅格系统实现

https://files.gracecode.com/2009_11_05/25552637224d.jpg

如果没有了解栅格系统是什么,建议 看完这篇文章 以后再回来。

其实有很种 CSS 写法实现栅格系统,很多 CSS 库也都会提供类似的栅格系统实现(譬如: YUIBluePrint )。

引用 One True Layout 文中所言,良好的布局应该具有的几个特性:

  1. 具有一定的灵活性
  2. 等高
  3. 基于栅格

请允许我「重复造了轮子」,我的栅格系统实现是基于 「伪绝对定位布局」 ,这样可以更好的实现上述所言的几个特征(很难解释,还是直接看 DEMO )。

http://graceco.de/grids/index.html 定义的 950px 宽度为公式 W )

column-24 start-01

因为是上述「伪绝对定位」的布局,所以相应列之间不会相互影响。而理解上述布局可能需要些时间,同时感谢师兄那么详细的讲解,我相信也会给你带来收获。

另, 感谢 Missx 提供栅格标准

  1. 黄金分割标准:右边的大小一般是左边大小的黄金比例
  2. 平分:在1024的分辨率下,一般采用330左右的分割
  3. 两栏分割:左边660 右边260左右
  4. 三栏分割:左边是200左右 中间400左右 右边300左右
  5. 三栏分割:右边两栏之和是左边的0.618
  6. 三栏分割:中间180 两边分别为380左右

很难具体的解释其中的细节,但是希望有问题的朋友能够留言,我尽量帮你解答。

我的照片

嗨!我叫「明城」,八零后、技术男、伪苹果粉、微软无脑黑、宁波佬,现居杭州。

除了我的博客,同时也欢迎您访问我的 GitHubTwitterInstagram 主页。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 其实无所谓叫什么名字,因为我曾经为这个名字伤透了脑筋。最后想到的这个名字都没啥特别的,说到 底是因为我实在给它不了个非常酷的名字。

如果您想联系我,可以发我邮件 echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d

注:本站点所持观点仅代表个人意见,不代表所服务公司的立场。

文章

项目

微信公众号