app介绍响应式html页面设计,关于响应式页面设计

4、媒体查询(media query)，这个也是响应式页面的一个关键技术，根据不同的分辨率去调整一些不同的样式。

@media screen and (max-device-width: 480px) {

.column {

float:none;

}

}

通过上面的这样媒体查询结构，我们可以设定在不同分辨率下选用不同的样式来调整响应式页面。像前面第二点流体布局上，我们使用百分比或字号比例去实现流体布局的时候，第一种方法是可以不用媒体查询直接实现流体布局的，就是元素的宽高能自适应不同分辨率屏幕。

但第二种方法用字号比例(em)去实现流体布局的时候，我们就必须要结合媒体查询了，因为我们的字号比例是根据基准字号来实现的，就是说在基准字号一定的情况下，该元素的大小就是固定的，而我们要实现该元素尺寸自适应，就只能通过调整基准字号来实现了。通过媒体查询，我们可以让在基准字号font-size在不同分辨率下不一样，这样其子元素相对于该字号的比例em算出来的像素px就不一样了，这样就能实现响应式了。

所以我们兼容不同的分辨率的时候，可以先在某个分辨率下，实现完美的重构，然后将所有元素具体的尺寸(px)折算为em(根据父容器的font-size)，然后再通过媒体查询，调整不同分辨率下的基准字号font-size就能实现具体的响应式了。

当然媒体查询的功能是根据不同的分辨率适配不同的样式，我们可以通过上面的做法是实现流体布局，还可以通过媒体查询来细调具体的页面在不同分辨率下的不同表现形式。

在我具体的项目过程中，采用媒体查询主要是调整不同分辨率下的基准字号的大小，具体如下面的代码所示：

body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:20px;}

/* for 800 px width screen */

@media only screen and (max-device-width:800px),only screen and (max-width:800px){

body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:33.34px;}

}

/* for 720 px width screen */

@media only screen and (max-device-width:720px),only screen and (max-width:720px){

body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:30px;}

}

前面设置通用字号为20px，当分辨率超过我媒体查询到的最大屏幕宽度的时候就适配该基准字号，下面分别通过媒体查询为分辨率为800px和720px的设备详细调整基准字号，(当然在这里你可以增加更多的样式去调整不同分辨率下的具体表现)使页面在两个分辨率下都能有比较好的表现。可以发现，在800px的分辨率设备中，我的基准字号设置为33.34px，在720px的分辨率设备下的基准字号为30px。

为什么在800px分辨率下基准字号就为33.34px，在720px分辨率下基准字号为30px呢，这是因为我是先以480px分辨率下基准字号为20px去实现的，那么在800px或720px下的基准字号就根据设备分辨率的比例去算出。 这里只给出两个分辨率的例子，其他不同分辨率下的实现方法一样。