自顺应网页即是响应式网页,所谓的响应式网页就是,同样的一个网址,在电脑,平板,手机阅读的时分,款式更着改动,这就是简单的一个解释,更合理的解释就是,网页依据屏幕的大小会变得自顺应,就会让网站看起来很自然。同样能够依据屏幕分辨率展现或者移除某些元素块。使在窄屏中简化网页,在宽屏中充盈网页,使其看起来愈加美观。

之前我的网站都是基于我本人的电脑屏幕分辨率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"rel="external nofollow" ></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。

 

请注意:网络时代讲究速度有全面的资讯,虽然互联网是一张密集的网络但由于各国之间相互交错,其实很多资讯与信息我们并不能完全获取,然而有技术的就可以通过翻墙访问全世界的每一个角落。不论您是长期从事何种职业当资源与信息匮乏时,即可通过参照本文进行简单设置电脑翻墙、手机(苹果IOS翻墙、安卓手机翻墙)、火狐浏览器翻墙、谷歌chrome浏览器翻墙等通通不在话下。并且特别针对与youtube、twitter推特、facebook翻墙等工具的使用和教程,保持长期稳定的更新幅度保障大家畅连全世界!