当前位置: 秋叶网络博客 网络技术 ◊ CSS自适应网页制作教程

CSS自适应网页制作教程

作者:秋了秋 发表时间:2014年09月23日

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

之前我的网站都是基于我自己的电脑屏幕分辨率1366x768设计而来,所以对于一些1024及以下电脑看起来不太和谐,今天花了点时间,重构网页结构,增加其响应式功能。

其实制作响应式主题网页并不难,之前想得太复杂一直没下手。当你动起手来的时候就会发现就只是一小段css3而已。

制作响应式主题首先要对自己的网站结构非常熟悉,最好就用谷歌浏览器的审查元素查看,非常有层次感,哪层包含哪层一目了然,把大致的结构(div布局)记在心中或者摘抄下来。然后选一个外围div层(用#content做例子),用css固定其大小,然后把里面的所有的div层宽度全部用百分比表示。这样做的目的是为了简化整体响应式制作的难度。

把里面的div元素调好之后,那么里面的div后续将不会劳烦我们,因为只要修改外围#content的宽度就可以了,里面的都会牵一发动全身跟着变换大小。所以后续我们只要在外围的#content上做功夫。

当然外围的的那个#content容器的宽度你也可以设置成百分比,但事实并不是每一个分辨率下网页内部结构的布局都是完美状态,我们需要选几个屏幕分辨率点打造完美状态。

然后在css中加入:

#content{overflow:hidden;}
 @media screen and (min-width: 1367px) {/*分辨率大于等于1367的时候*/
     #content {width: 1021px} 
 }
 @media screen and (max-width: 1200px) {/*分辨率小于等于1200的时候*/
     #content {width: 950px} 
 }
 @media screen and (max-width: 1024px) {/*分辨率小于等于1024的时候*/
     #content {width: 807px} 
 }
 @media screen and (max-width: 800px) {/*分辨率小于等于800的时候*/
     #content {width: 500px;} 
 }
 @media screen and (max-width: 500px) {/*分辨率小于等于500的时候*/
     #content {width: 356px;} 
 }
/*弹性媒体*/
img,embed,object,iframe,table,td,tr,tbody{max-width: 100%;}

加入后我们在浏览器上打上我们的网址,把窗口调到不同大小,看看哪些元素还需要修改,做一些小修小补,该要的要,不该要的去掉,具体效果请看本站。

因为这是基于css3的效果,所以要使它兼容ie等浏览器,需要在网页的头部位置<head>与</head>之间加上

<!--[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。

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/132.html
目录: 网络技术 | 标签: 自适应网页制作, 响应式 | 15597次阅读