通过响应式web设计,使本站支持手机浏览

2014-01-28 14:49:14
现在越来越多的人通过手机来上网,手机由于屏幕尺寸的原因,当浏览为PC端浏览器设计的网页的时候,往往会出现各种各样的问题。 糊涂僧的这个小博客也一样,为了让本站在手机端也表现的较好,所以今天用上了响应式web设计的思路,对本站进行了改造,现在在手机上浏览本站能够得到较好的体验。

一、问题

现在越来越多的人通过手机来上网,手机由于屏幕尺寸的原因,当浏览为PC端浏览器设计的网页的时候,往往会出现各种各样的问题。
糊涂僧的这个小博客也一样,为了让本站在手机端也表现的较好,所以今天用上了响应式web设计的思路,对本站进行了改造,现在在手机上浏览本站能够得到较好的体验。

我们先来看一下效果,看看应用响应式设计前后,在手机上浏览本站的样子:

之前的样子,是把网站按比例缩小了,基本上看不清文字,只能通过放大了看



应用响应式设计之后的样子,内容跟PC端一样,只是布局不一样了,也没有缩放,看起来更适合在手机端阅读。



二、响应式设计的简单原理

下面我们先看一下到底什么是响应式WEB设计,是怎么来实现的。
响应式WEB设计听起来挺高端大气上档次的,它的英文叫“Responsive Web Design”,在咱们国内也叫流式设计、自适应布局等等,都是一个意思。
它解决的问题是,让网页在各种不同分辨率的屏幕上表现的尽可能好。

说到布局,我们知道在网页制作当中, 负责样式布局的就是CSS了,一个页面的文字大小啊,元素的宽高啊,都由CSS来负责, 所以响应式WEB设计的核心就是让不同的分辨率使用不同的CSS。比如在PC端,应用的是一套CSS,在手机端用的是另外一套CSS。


下面就介绍两个响应式设计的核心HTML CSS元素, ViewPort 和 MediaQuery

1、什么是ViewPort?
ViewPort直接翻译过来就是“视口”,我看国内有些人也是这么叫的,详细的介绍大家可以去看苹果官方的一个介绍,还是很不错的,说的很详细,Safari Web Content Guide: Configuring the Viewport


简单来说,就是可视区域,比如我们手机浏览器。 因为Viewport是个区域,所以它有这几个属性,宽、高、是否缩放、缩放比例等。

上面的图片,在未应用响应式web设计之前,手机浏览器是把页面缩放了,实际上也就是ViewPort的缩放属性起了作用。那么,我们现在第一步要做的就是,让页面别缩放,该是多大就显示多大。

那么,我们就要通过ViewPort属性来做,告诉浏览器不要缩放,
具体的代码就是在HTML头部,加上一个meta标记,name就叫viewport,后面可以跟上viewport的那些属性。

width=device-width 就是告诉浏览器,viewport的宽度就是当前设备的宽度,比如iphone是320px
initial-scale =1 就是告诉浏览器,初始的缩放比例是1,也就是1:1显示,不缩放。

2、MediaQuery属性
MediaQuery翻译过来是“媒体查询”,也就是浏览器能够知道当前设备的一些情况,比如设备的分辨率是多少,你是横屏还是竖屏等。 通过MediaQuery,我们就能够对不同的分辨率应用不同的 CSS样式。

MediaQuery是写在CSS中的,大体的写法如下:

body{color:red;}
@media only screen and (max-width : 480px) {body{color:blue;}}
@media only screen and (min-width:480px and max-width : 960px) {body{color:#000000;}}

意思是,默认情况,页面文字是红色的, 当屏幕宽度小于480px时,页面文字变成蓝色的, 当页面宽度大于480px小于960px时,页面文字变成黑色的。


三、本站是如何做的

通过上面的介绍, 大家应该有了大体的思路了, 代码也很简单,我就是在原有css的后面加上了下面的代码,当浏览器的宽度小于480px的时候,应用下面的CSS来重新对页面布局,比如把“糊涂僧”几个字的大小调小点,把左侧的导航栏搬到上面等, 具体大家可以翻翻我的代码看看。
http://www.hutuseng.com/ui/css/layout.css

@media only screen and (max-width : 480px) 
{
    img{max-width:100%; height:auto;} /*让图片也能够自适应*/
   #logo{height: 40px;font-size: 16px;padding: 5px 10px;} /*糊涂僧几个字变小点 ,间距调小点*/
   .slidebar{padding: 0px;width: 100%;float: none;clear: both;overflow: hidden;} /*左侧导航栏不浮动了*/
   .mainContent{margin-left: 0px;} /*右侧内容区没有左边距了*/
   .article .article_image {float: none;width: 100%;} /*文章的图片不浮动了,单独一行*/
   .article .article_summary{margin-left: 0px;} /*文章的简介放在图片下面显示了*/

}