作为一个无线部分的人，不懂挪动装备是不可的。而作为一个无线的重构，网站制作不会写照应式页面更是不可得。而我，一个无线的重构，在我比来做的一个挪动端的项目之前，简直是不会写照应式页面的，以是，严厉来说，在这个项目之前，我是一个不及格的无线重构人。
而这个项目，却让我疾速地掌控了照应式页面重构的一些举措措施。下面就是颠末这个项目来总结我在照应式页面重构学到的器械。
尽人皆知，所谓照应式页面，就是可以也许用一套款式，使你的页面可以也许在差异分辨率的屏幕下都有很好的表示,情势。照应式Web设想，这个看法是Ethan Marctte 在A List Apart 揭橥的一篇文章“Responsive Web Design”中援用照应式修建而得名：
照应式修建(responsive architecture)，物理空间应该可以也许根据存在于此中的人的景象遏制照应。
根据我所浏览过一些文章及资料，
高端网站建设公司，我总结出照应式页面的几个症结构成部分：
1、页面头部的meta申明，可以也许颠末viewport meta标签去让你的html页面的的宽度能根据装备分辨率让浏览器的可视宽度来适应，也可以也许在这里设置页面的缩放比例等等，如许在成比例的分辨率装备下，就可以也许更简单地完成照应式。
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/