自适应网页即是响应式网页,所谓的响应式网页就是,同样的一个网址,在电脑,平板,手机浏览的时候,样式更着改变,这就是简单的一个解释,更合理的解释就是,网页根据屏幕的大小会变得自适应,就会让网站看起来很自然。同样可以根据屏幕分辨率展示或者移除某些元素块。使在窄屏中简化网页,在宽屏中充盈网页,使其看起来更加美观。
之前我的网站都是基于我自己的电脑屏幕分辨率1366×768设计而来,所以对于一些1024及以下电脑看起来不太和谐,今天花了点时间,重构网页结构,增加其响应式功能。
其实制作响应式主题网页并不难,之前想得太复杂一直没下手。当你动起手来的时候就会发现就只是一小段css3而已。
制作响应式主题首先要对自己的网站结构非常熟悉,最好就用谷歌浏览器的审查元素查看,非常有层次感,哪层包含哪层一目了然,把大致的结构(div布局)记在心中或者摘抄下来。然后选一个外围div层(用#content做例子),用css固定其大小,然后把里面的所有的div层宽度全部用百分比表示。这样做的目的是为了简化整体响应式制作的难度。
把里面的div元素调好之后,那么里面的div后续将不会劳烦我们,因为只要修改外围#content的宽度就可以了,里面的都会牵一发动全身跟着变换大小。所以后续我们只要在外围的#content上做功夫。
当然外围的的那个#content容器的宽度你也可以设置成百分比,但事实并不是每一个分辨率下网页内部结构的布局都是完美状态,我们需要选几个屏幕分辨率点打造完美状态。
然后在css中加入:
加入后我们在浏览器上打上我们的网址,把窗口调到不同大小,看看哪些元素还需要修改,做一些小修小补,该要的要,不该要的去掉,具体效果请看本站。
因为这是基于css3的效果,所以要使它兼容ie等浏览器,需要在网页中加入:
最后,别忘了在网页的头部位置<head>与</head>之间加上
附:电脑不同尺寸主流分辨率参考:
电脑:2048*1152;1920*1080;1680*1050;1600*900;1440*900;1366*768;1280*800;1024*768;
移动:480*800;960*640。