响应式网页制作教程-【其实并不难】
自顺应网页即是响应式网页，所谓的响应式网页就是，同样的一个网址，在电脑，平板，手机阅读的时分，款式更着改动，这就是简单的一个解释，更合理的解释就是，网页依据屏幕的大小会变得自顺应，就会让网站看起来很自然。同样能够依据屏幕分辨率展现或者移除某些元素块。使在窄屏中简化网页，在宽屏中充盈网页，使其看起来愈加美观。
之前我的网站都是基于我本人的电脑屏幕分辨率1366×768设计而来，所以关于一些1024及以下电脑看起来不太调和，今天花了点时间，重构网页构造，增加其响应式功用。
其实制造响应式主题网页并不难，之前想得太复杂不断没下手。当你动起手来的时分就会发现就只是一小段css3而已。
制造响应式主题首先要对本人的网站构造十分熟习，最好就用谷歌阅读器的检查元素查看，十分有层次感，哪层包含哪层了如指掌，把大致的构造（div规划）记在心中或者摘抄下来。然后选一个外围div层（用#content做例子），用css固定其大小，然后把里面的一切的div层宽度全部用百分比表示。这样做的目的是为了简化整体响应式制造的难度。
把里面的div元素调好之后，那么里面的div后续将不会劳烦我们，由于只需修正外围#content的宽度就能够了，里面的都会牵一发起全身跟着变换大小。所以后续我们只需在外围的#content上做功夫。
当然外围的的那个#content容器的宽度你也能够设置成百分比，但事实并不是每一个分辨率下网页内部构造的规划都是圆满状态，我们需求选几个屏幕分辨率点打造圆满状态。
然后在css中参加：
#content{overflow:hidden;}
@media screen and (min-width: 1367px) {
#content {width: 1021px} /*分辨率大于等于1367的时候，宽度为1021*/
}
@media screen and (max-width: 1200px) {
#content {width: 950px} /*分辨率小于等于1200的时候，宽度为950*/
}
@media screen and (max-width: 1024px) {
#content {width: 807px} /*分辨率小于等于1024的时候，宽度为807*/
#menu,#topcontent,.date,#header0 .header-background,.gonggao{display:none;}/*浏览器小于等于1024的时候，隐藏这些元素*/
#page_top {margin:0;}
}
@media screen and (max-width: 800px) {
#content {width: 500px;} /*分辨率小于等于800的时候，宽度为800*/
}
@media screen and (max-width: 500px) {
#content {width: 356px;} /*分辨率小于等于500的时候，宽度为356*/
}
/*弹性媒体*/
img,embed,object,iframe,table,td,tr,tbody{max-width: 100%;}
参加后我们在阅读器上打上我们的网址，把窗口调到不同大小，看看哪些元素还需求修正，做一些小修小补，该要的要，不该要的去掉,详细效果请看本站。
由于这是基于css3的效果，所以要使它兼容ie等阅读器，需求在网页中参加：
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
最后，别忘了在网页的头部位置<head>与</head>之间加上
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
附：电脑不同尺寸主流分辨率参考：
电脑：2048*1152；1920*1080；1680*1050；1600*900；1440*900；1366*768；1280*800；1024*768；
挪动：480*800；960*640。 转自小胖博客
发表评论