作为一个无线部分的人，不懂挪动装备是不可的。而作为一个无线的重构，网站制作不会写相应式页面更是不可得。而我，一个无线的重构，在我近来做的一个挪动端的项目之前，简直是不会写相应式页面的，以是，严厉来说，
高端网站建设公司，在这个项目之前，我是一个不及格的无线重构人。
而这个项目，却让我疾速地掌握了相应式页面重构的一些方式。下面就是经由这个项目来总结我在相应式页面重构学到的东西。
尽人皆知，所谓相应式页面，就是可以也许用一套款式，使你的页面可以也许在分歧分辨率的屏幕下都有很好的表示情势。相应式Web企图，这个概念是Ethan Marctte 在A List Apart 揭橥的一篇文章“Responsive Web Design”中援用相应式修建而得名：
相应式修建(responsive architecture)，物理空间应该可以也许凭据存在于其中的人的景象举行相应。
凭据我所浏览过一些文章及资料，我总结出相应式页面的几个要害构成部分：
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。
为安在800px分辨率下基准字号就为33.34px，在720px分辨率下基准字号为30px呢，这是因为我是先以480px分辨率下基准字号为20px去完成的，那末在800px或720px下的基准字号就凭据装备分辨率的比例去算出。 这里只给出两个分辨率的例子，其他分歧分辨率下的完成方式一样。
经由下面的几点要害技能，我们就可以也许完成具体的相应式页面了。看完这篇文章，可否是感觉相应式页面其实也没有设想中那末难呢?那末，有空自身去尝尝吧，只要自身着手完成后才气真正知道其中的秘密哦!!!
本文颁布于尚品中国企业网站扶植效劳商http://www.sino-web.net/