响应式布局与CSS媒体查询

转自

 

4.响应式布局与CSS媒体查询

 

4.1 为什么要响应式布局和媒体查询

 

     为什么要响应式布局和媒体查询？因为自从智能手机和平板电脑发展起来以后，他们的屏幕虽然不大，但分辨率越来越高！这导致在这些设备上，网页上的内容会 看起来会很小，甚至看不清楚，不利于阅读。虽然可以进行缩放，但总是让用户每当打开一个网页都要缩放显然是比较差的设计体验。再者，多列布局的网页在这些 小屏幕设备上看起来很是细长，也是不利于阅读的。下面是通过Opera Mobile Emulator模拟 ASUS Nexus 7 浏览我的博客在应用媒体查询前后的对比：

 

图：上图为应用媒体查询前，下图为应用媒体查询后

 

     下面是通过Opera Mobile Emulator模拟 Samsung Galaxy S III 浏览我的博客在应用媒体查询前后的对比：

 

                                 图：左图为应用媒体查询前，右图为应用媒体查询后

 

     通过对比，发现应用了媒体查询后确实比之前显示效果好很多。

 

4.2 媒体查询的核心技术

 

     响应式布局所依赖的核心技术是CSS媒体查询。它可以通过@viewport规则定义视窗区域以设备的物理尺寸为基准，从而解决小屏幕高分辨率下页面内 容显示小的问题。可惜的是，目前实现这一规则的浏览器不多，WP8上的IE10和较新版的Opera浏览器实现或部分实现了这个规则。对于Android 和iOS等设备上的常用浏览器，需要通过HTML内的<meta>标签来实现相同的目的。这个<meta>标签的声明如下：

<!--HTML Code-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

     CSS媒体查询的另一个核心是@media规则，这个规则的浏览器支持率还是很高的，除了IE8及其以下版本的浏览器不支持，大多数浏览器都支持。因为 我们的响应式布局主要针对的是移动智能设备，而这些设备上的浏览器大都支持@media规则，所以IE8及其以下版本不支持也不是什么大问题。

 

4.3 响应式布局的实现

 

     对于我的博客布局，实现响应式布局的CSS代码代码很简单，具体如下：

@-ms-viewport {
    width: device-width;
}
@media (max-width:990px) {
    #home{ margin:0 15px; }
}
@media (max-width:640px) {
    #sideBar, #mainContent{ width:100%;}
    .post{ border-left:none; }
}

     但是这样是很不够的，Android和iOS等设备上的常用浏览器不支持@viewport规则。所以必须得使用HTML内的<meta> 标签。可是，博客园几乎所有的HTML模版都没有定义与媒体查询有关的meta标签，我又无法手动更改博客模版的静态HTML页面。怎么办呢？只有通过 JavaScript来向HTML内添加<meta>标签了。幸好，我们可以通过博客园后台管理设置里的“页首Html代码”等来添加自己的 JS。下面就是所需的JS代码：

<script type="text/javascript">
    $(document).ready(function ()
    {
        var meta = document.createElement("meta");
        meta.name = "viewport";
        meta.content = "width=device-width, initial-scale=1.0";
        $('head').prepend(meta);
    });
</script>

 

 

 4.4 响应式布局的缺点与改进

 

     使用4.3节介绍的方法实现了响应式布局，但响应式布局也有其缺点。当视窗区域宽度较小时，响应式整个页面的两列布局变成了一列，侧边栏被布局到博客的底部。若博客内容很长， 想到达侧边栏就需要多次翻页。这也是不利于内容访问的。

     如何克服这一缺点呢？我们可以在页面的顶部（或者其他方便的地方） 提供一个跳转锚点链接，使点击这个链接的时候，可以直接跳转到侧边栏。要实现这个功能，一个简单的方法是，先在博客园后台管理设置页首代码，添加一个链接，如：

 

          <a id="jumpToAside" href="#asideAnchor">跳至侧栏</a> 

 

     然后，在博客园后台管理设置公告代码，添加一个链接，如：

 

     <a id="asideAnchor" name="asideAnchor"></a>

 

     这样，就可以克服了响应式布局的缺点，快速地访问侧边栏。我为自己的博客实现了这个功能（跳转链接应用了一些CSS样式），看到这篇文章的你如果使用的 是支持媒体查询的浏览器，请将浏览器的宽度缩小到一定程度，会看到页面右上角出现了文本内容为“跳至边栏”的链接，点击它，就可以直接跳转到侧边栏了。如 果你使用的是智能手机的竖屏浏览这篇博客，通常也能看到这个跳转链接。