浅谈web响应式布局

宁波网站建设 | 2017-01-07

     随着移动端设备的普及,越来越多的人在移动设备上浏览网页。然而传统的网页是基于PC来布局的,不适合在移动端观看,由此,响应式网站逐渐发展并得到了普及。
     响应式布局,顾名思义就是一个网站可以在pc端和移动端浏览,并且根据这两种设备的不同特性展现出不同的样式结构。简言之,是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
实现页面响应式主要使用到的是css3中的媒体查询属性,即@media属性。通过设置该属性,可以在对应查询的媒体中设置对应的样式,来达到在不同设备上面显示对应页面结构和外观。一般在设置媒体查询属性时,将媒体分为1200px以上的大分辨率设备,992~1200px的中等分辨率设备,768~992px的平板设备,以及小于768px的手机设备。当然,这些分界点也可以根据实际需要进行修改。

                                          

                                          
      响应式网站的优势在于多终端视觉和操作体验非常风格统一,并且响应式网站兼容当前及未来新设备 。响应式web设计中的大部分技术可以用在WebApp开发中,能够节约开发成本,维护成本也降低很多。响应的方式主要有两种,一种是移动优先,即在设计的初期就要考虑的页面如何在多终端显示;另一种则是渐进增强,这样做能充分发挥硬件设备的最大功能。
      在实际开发中,也会使用一些响应式框架,比如bootstrap等。bootstrap框架的网格系统非常适合于制作响应式网站。在网页中经常会有一些元素并排显示,然而在移动端并排显示影响显示效果,我们需要让他们单排显示。在之前,我们需要使用媒体查询,在不同的设备中写不同的样式。如果使用bootstrap的网格系统,我们仅需要添加简单的类名就能实现这一效果。bootstrap中也有许多自带的样式和插件,使用起来也十分方便。

                                           
      当然响应式网站具有一定的缺点,比如在低版本浏览器兼容性有问题。在移动带宽流量方面,相比较手机定制网站,流量稍大,但比较加载一个完整pc端网站显然是小得多。代码累赘,会出现隐藏无用的元素,加载时间加长。兼容各种设备工作量大。所以对于重内容的网站,例如形象展示,则比较适合使用响应式web设计,然而对于重功能的网站,如电子商务类,则更推荐使用独立移动网站。                     
      虽然存在一些局限性,但对于大部分展示型网站,响应式网站无非是最适合的选择。


上一篇:零基础如何灵活运用网站特效 前端工程师来教你下一篇:关于网站制作中对于浏览器兼容的一些认识。
联系电话 400-6065-301

微信咨询 寒总监