1.媒体查询

在进行WEB程序设计时,针对同一个网站有不同的使用设备,如桌面PC,移动设备,IPD和不同的分辨率,怎样设计针对这不同设备的网页呢?采用媒体查询,即大家所说的响应式WEB编程。下面介绍如何实现这个功能.

1.1创建内容和HTML

在head元素中添加<meta name="viewport" content="width=device-width,initial-scale=1.0" />.

在页面底部添加对respond.js的请求，从而让媒体查询对IE8及以下版本也有效,这个script元素放在条件注释里,只有Internet Explorer 8 以下会加载respond.js

<!--[if lte IE 8]>

<script src="assets/js/respond.js"><script>

<![end if]-->

1.2选择设计实现方法

为所有设备建立基准样式，再从小屏幕(移动)做起,逐渐覆盖到大屏幕(桌面)。

(1)首先为所有设备提供基准样式.这通常包括基本的字体格式、颜色、外边距、内边距，但不包含元素的浮动和定位。内容将按照常规的文档流由上到下显示。网站对所有设备都具有可访问性.

(2)从这种样式开始，使用媒体查询逐渐为更大的屏幕定义样式。大多时候,min-width和max-width媒体查询是主要的工具。

这种方法通常称为移动优先的响应式Web设计，这种方法遵循渐进增强的原则,因此在WEB圈子里具有很大的吸引力

/*-------------基准样式-----------*/

body{

color:#1d3d76

font:100% "Trebuchet MS",Verdana,sans-serif;

}

h1,h2,h3,h4,h5,h6,.logo{

color:#b74e07

font-weight:bold;

}

h1{

font-size:1.25em;/*24px/16px*/

text-transform:lowercase;

}

.nav li{

display:inline;

font-size:.7em;

}

/*-------------大于等于320px----------------*/

@media only screen and (min-width:320px){

.photo{

float:left;

}

}

/*---------------大于等于480px-----------------*/

@media only screen and (min-width:480px){

.intro{

margin:-.9% 0 0 110px;

}

.entry .date{

margin:0;

text-align: right;

position: relative;

top: -1em;

}

#main .contiued{

margin-top: -1%;

text-align: right;

}

}

/*---------------大于等于600px-----------------*/

@media only screen and (min-width:600px){

}

/*---------------600px到767px之间-----------------*/

@media only screen and (min-width:600px) and (max-width:767px){

}