赣州众联网络8年专注于赣州网站建设,赣州做网站、网站SEO优化就找众联!
赣州众联网络
赣州做网站 > 网站策划 > 什么是响应式网站布局?

什么是响应式网站布局?

时间 : 2019-02-07 12:08 浏览量 : 24

  响应式Web设计(Responsive Web Design,RWD)是web设计人员Ethan Marcotte积极倡导的一组技术。采用这种方法设计的网站可以根据用户浏览器的环境调整布局,大多会利用CSS做一些精妙的处理。根据某些浏览器条件的当前值,如窗口大小、设备方向或长宽比等,我们可以在不同场合下应用不同的CSS,通过重新考虑设置页面布局的方式,我们可以调整原先那种“以不变应万变”的行列网格布局,以适应各种不同的浏览器窗口大小,使之能更自然地呈现。

  

响应式网站布局


  现在的前端开发,需要迎接的一大挑战就是分辨率。各种设备都有白己的典型分辨率,要让自己的页面在很多种分辨率下都有比较好的效果,该怎么办呢?显然,不可能简单地进行等比缩放,在大屏幕上合适的页面,等比缩放到小屏幕上就会显得反人类。理想的解决方案是大屏幕和小屏幕下连布局都不一样,比如大屏幕下是左右布局,小屏幕下是上下布局,并且把导航缩成菜单。

  

  要想达到这种效果,JavaScript是不合适的,虽然能达到目的,但写起来会很繁琐,更重要的是,这本来就不是JavaScript的活儿,JavaScript应该是描述交互的,而不是外观。那么,最佳的候选人就是CSS了,它本来就擅长描述外观。事实上,CSS早就考虑到了这个问题,它设计了一种叫作媒体查询( Media Query)的技术来支持不同而分辨率,甚至不同的显示设备,如打印机和屏幕。

  

  在媒体查询的支持下,一段CSS可以只在当前的显示媒体符合一定要求的情况下才生效,比如屏幕宽度大于或小于一定尺寸、横屏还是竖屏、色深是8位还是32位等。响应式布局中,主要用到的是对屏幕宽度的判断,屏幕方向、高度之类的也偶尔会用到。Bootstrap就是一个典型的支持响应式布局的CSS框架。

  

  简单来说,响应式布局的原理就是根据不同屏幕的大小,指定HTML元素采用不同的样式。其首要问题就是能够让布局字段检测到屏幕的尺寸大小,这需要用到CSS3的Media Queries特性。CSS3中的Media Query是响应式网页设计的关键,它就像一个if语句,告诉浏览器如何根据特定的屏幕窗口来加载网页。

  

  media query属性的基本语法如下:@media screen and ( min-width: 320px ) and ( max-width: 479px )

  

  media属性后面跟着的是一个screen媒体类型,然后用and关键字来连接条件(其他关键字还有not、only),括号里就是一个媒体查询语句,用于声明当屏幕尺寸符合条件时采用该种样式。具体到上述代码,判定条件为屏幕大于320px小于479px时,采用样式表。这个语句,就是响应式布局的基础,在判断终端分辨率大小之后,赋予不同的样式进去。

  

HTML网页缩放


  为了适应屏幕,多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。可以在HTML head部分。使用meta标签的viewport属性来设置。代码告诉浏览器使用设备屏幕宽度作为内容的宽度,并且忽视初始的宽度设置。

  

基于响应式Web设计的网站将是移动设备最理想的访问站点,因为它具有以下一些优势。

  

1.成本优势

  

  目前很多网站为了适应不同设备的浏览,会针对不同的设备开发多个版本,这样做的结果就是在开发、维护和运营上投入更多的成本。基于响应式Web设计的网站,只有一个页面,只是针对不同的分辨率、不同的设备环境进行了一些不同的设计,所以在开发、维护和运营上,能有效节约成本。

  

2.兼容性优势

  

  移动设备新的尺寸层出不穷,定制的版本通常只适用于某些规格的设备。如果新的设备分辨率变化较大,则往往不能兼容,而开发新的版本需要时间,这段时间内的访问就是个问题,但是响应式Web设计可以提前预防这个问题。

  

3.操作灵活

  

  响应式设计是针对页面的,可以只对必要的页面进行改动,其他页面不受影响。

  

  响应式Web设计虽然灵活性强,可以适应不同分辨率的设备,但是它的缺点也是显而易见的。为了兼容各种设备,就需要不断扩展代码,最终导致代码臃肿,而且页面加载的时间也会比较长。所以,针对赣州网站建设的实际情况,有选择的采用响应式Web设计是比较推荐的选择。


WEBSITE CONSTRUCTION

网站建设资讯

打开客服菜单
cache
Processed in 0.004218 Second.