网站首页 > 网站设计> 文章内容

响应式网页设计的快速教程(适合个人站

※发布时间:2018-1-23 16:22:43   ※发布作者:habao   ※出自何处: 

  做 过wap站、做过siteApp、做过第三方,也做过APP,现在又做了个自适应的模板。所谓“响应式网页设计(Responsive Web Design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计。就是输入本站域名,手机、平板、PC端显示的效果不同的,但是 URL确是相同的。

  其实完全是靠张力博主()的鼎力相助,他用的是本站移植到Wordpress的模板,后面经过多次修正与完善,制作了响应式的网页模板,后自发的为我制作了一套z-blog的自适应模板,可谓青出于蓝而胜于蓝。

  在head里加入这条元标签,那移动浏览器中页面将以原始大小显示,并不能缩放。不让浏览器缩放目的是网页能自适应屏幕的完整性,避免网页混乱。

  有两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件,弃用。原因是博客CSS文件不大代码也不多,不需要多个CSS文件,也能减少并发。

  这意味着宽度在1024px以下的屏幕,我博客会呈现六种不同的效果。但为了网页的连续性与完整性,同时也是图省事,下面六个CSS几乎相同。

  唯一不同的是加入了display:none,不显示某些内容。所以通过CSS观察发现,屏幕越小,显示的内容就越来越少。

  要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。

  只要制作两个,能看懂CSS文件就可以搞定,照猫画虎,人人都能做出响应式的网页设计,看似很难,实际上很简单。

  

关键词:网站设计教学