web响应式页面举例分析

本篇内容介绍了“web响应式页面举例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1、页面头部的meta说明，可以通过viewport meta标签去让你的html页面的的宽度能根据设备分辨率让浏览器的可视宽度来适应，也可以在这里设置页面的缩放比例等等，这样在成比例的分辨率设备下，就可以更简单地实现响应式。

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

2、流体布局（fluid grid），所谓的流体布局，其实就是在你pc端实现的页面基础上，将一些元素的宽高由原来的固定多少像素（px）调整为百分比（%）或字体比例（em）（或布局方面的margin、padding、left、top等以px为单位的值），这也是当前实现响应式布局的两种主要实现方法。

***种用百分比（%），就是以该元素的父容器的宽高为100%，其他元素的宽高相对于其父容器的比例，只要将具体的像素值相对于他的父容器的一个百分比折算即可。当然这种方法的换算有点复杂，因为很多相对的宽高折算的百分比系数是带小数的，所以这时候可能要你有足够的耐心才能实现。

在Ethan Marctte的Responsive Web Design这篇文章中给出的一个demo中，我们可以看到他的实际代码里：

@media screen and (max-width: 400px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 48.341232227488151658%; /* 306px / 633px */ }

第二种方法是用字号比例（em）去实现，其实方法是跟上面一样的，只不过我们将%换成了em，这种方法就是某元素具体的宽高（px）在当前基准字号（font-size）下折算出多少个em。eg： 一个在480分辨率下宽高为64px*64px的元素，其父容器的字号（font-size）为20px，那么它折算成em为单位就是3.2em*3.2em。当其父容器字号基准根据不同的分辨率变化的时候，该元素的宽高也能根据这个字号基准成比例的缩放，就能实现响应式变化。

从上面的两张实例图我们可以看到，同一个元素，宽高为3.2em*3.2em，在360px分辨率下，因为基准字号为15px，故解析出来的实际尺寸为48px*48px，而在480px分辨率下，基准字号为20px，故实际的尺寸为64px*64px。

3、流体图片（liquid image），在我所了解的很多资料中，对图片处理这块，如果要使图片能根据分辨率来适应，而且还不失真，好像挺困难的。但其实我们不用考虑的那么复杂，我们要做的只是让图片能根据不同分辨率自适应罢了，我们不管图片会不会因为被拉伸而失真，因为真的遇到这样的情况，我们可以考虑在不同分辨率下使用不同的图片，这样就简单多了。所以让图片尺寸自适应，我们只要不给图片设定具体的宽高尺寸，只要在样式中给该图片一个width：100%，这样图片就能根据它父容器的尺寸自动调整了。

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。

“web响应式页面举例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！