有了梦想,我们的心有了飞翔; 有了飞翔,我们的梦想不再遥远。。。。。。
开抢双十一红包

我的个人博客也实现了响应式布局

2016年1月23日 梦想霞 4495 次浏览

我的个人博客网站一开始只是做了PC端,但现在移动端已经普及,很多人都习惯了用手机访问网页,我也为了更好的用户体验,更好的适配各种设备,制作了响应式布局。那么如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media Query来实现。本文主要介绍移动开发和CSS3结合,来进行多种分辨率适配的例子。

文中提到了响应式布局,那么何谓响应式布局呢?简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。是基于CSS3的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局。

响应式布局

对新手来说,响应式布局可能有一点复杂,但是事实上比你想象的简单。为了帮助你迅速的了解响应式布局,我起草了一篇快速教程。你可以在3个步骤中学习到响应式布局和媒介查询(Media Queries)的基本原理(假定你了解基本的CSS知识)。

第一步:Meta标签

大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

1
2
3
<!--[if lt IE 9]>  
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]-->

第二步:HTML结构

在这个例子里,我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素,内容容器是600像素而侧边栏是300像素。

HTML结构

第三步:媒介查询-Media Queries

CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。

当视图宽度为大于980像素时,如下规则将会生效。基本上,我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

媒介查询

然后为小于等于980像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动,使得这些容器按全宽度显示。

媒介查询

对于小于等于480像素(手机屏幕)的情况,将#header元素的高度设置为自适应,将h1的字体大小修改为24像素并隐藏侧边栏。

媒介查询

你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则,来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。

标签:

上一篇: 通过自定义模板,为自己的WordPress主题添加文章形式

下一篇: 前端开发应该知道的jQuery技巧



热门文章

随机文章

站点统计

  • 文章:46 篇
  • 分类:10 个
  • 标签:99 个
  • 运行:990天
  • 更新:2018年2月7日
  • RSS Feed