做为一个无线网络单位的人，不明白移动终端是不好的。而做为一个无线网络的重新构建，网站制作不会写响应式网页页面也是不好得。可是我，一个无线网络的重新构建，在我近期做的一个挪动端新项目以前，确实是不会写响应式网页页面的，因此，严格意义上来说，在这个新项目以前，我是一个不过关的无线网络重新构建人。

而这一新项目，却要我迅速地把握了响应式网页页面重新构建的一些方式 。下边便是根据这一新项目来小结我还在响应式网页页面重新构建学得的物品。

大家都知道，说白了响应式网页页面，便是可以用一套款式，使你的网页页面可以在不一样屏幕分辨率的显示屏下都是有非常好的表达形式。响应式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: 401080x) {
.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，而在481080x屏幕分辨率下，标准字体大小为20px，故具体的规格为64px*64px。

3、液体照片(liquid image)，在我所掌握的许多材料中，对照片处理这方面，假如要使照片能依据屏幕分辨率来融入，并且还不失帧，仿佛挺艰难的。但实际上大家无需考虑到的那麼繁杂，我们要做的仅仅让照片能依据不一样屏幕分辨率响应式而已，大家无论照片是否会由于被拉申而失帧，由于确实碰到那样的状况，我们可以考虑到在不一样屏幕分辨率下应用不一样的照片，那样就简易多了。因此让图片大小响应式，大家要是不给照片设置实际的高宽规格，要是在款式中给该照片一个width：100%，那样照片就能依据它父器皿的规格全自动调节了。

4、媒体查询(media query)，这一也是响应式网页页面的一个核心技术，依据不一样的屏幕分辨率去调节一些不一样的款式。
@media screen and (max-device-width: 481080x) {
.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:801080x),only screen and (max-width:801080x){
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，当屏幕分辨率超出我媒体查询到的较大显示屏总宽的情况下就兼容该标准字体大小，下边各自根据媒体查询为屏幕分辨率为801080x和720px的机器设备详尽调节标准字体大小，(自然在这儿你能提升大量的款式去调节不一样屏幕分辨率下的主要表现)使网页页面在2个屏幕分辨率下都能有比较好的主要表现。能够 发觉，在801080x的屏幕分辨率机器设备中，我的标准字体大小设定为33.34px，在720px的屏幕分辨率机器设备下的标准字体大小为30px。

为啥801080x屏幕分辨率下标准字体大小就为33.34px，在720px屏幕分辨率下标准字体大小为30px呢，这是由于我是先以481080x屏幕分辨率下标准字体大小为20px去完成的，那麼在801080x或720px下的标准字体大小就依据机器设备屏幕分辨率的占比去计算。 这儿只得出2个屏幕分辨率的事例，别的不一样屏幕分辨率下的完成方式 一样。

根据上边的几个方面核心技术，大家就可以完成实际的响应式网页页面了。看了本文，是否感觉响应式网页页面实际上都没有想像中那麼难呢?那麼，有时间自身去试试吧，仅有亲自动手完成后才可以真实了解在其中的秘密哦!!!
文中公布于酷站科技公司网站建设服务提供商http://www.bjkuzhan.com">来源于申明：以上内容一部分(包括照片、文本)来自互联网，若有侵权行为，请立即与本网站联络（010-57218159）。
如没特殊注明，文章均为酷站科技原创,转载请注明来自http://www.bjkuzhan.com/jianzhanzhishi/2994.html