你的位置:首页 > 网页设计

[网页设计]深入剖析响应式布局的原理


说到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动 设备的显示效果,设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布 局该怎么设计(通过CSS3 Media Query实现响应布局)。  

响应式布局顾名思义就是随电脑屏幕的大小而改变,响应式布局就是用不同的终端来查看页面,可以根据不同的大小来显示页面。响应式布局又优点,也有缺点,优点是:面对不同分辨率设备灵活性强。能够快速解决多设备显示适应问题。缺点:兼容各种设备工作量大,效率低下,代码累赘,会出现一些隐藏无用的元素 ,加载时间长,响应式布局也是一种程度上折衷性质的设计解决方案,多方面因素影响而达不到最佳效果,一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。这就是响应式布局。

首先我们先认识一下什么是 media属性吧

@media screen and (min-width: 320px) and (max-width : 479px)

就从这个条件语句开始介绍,media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种媒体类型之一)。然后用 and 关键字来连接条件,然后括号里就是一个媒体查询语句,稍微懂点css的同学都能看懂,这个条件语句意思是在大于320小于479 的分辨率下所激活的样式表。

这个语句就是响应式布局的基础应用了,在给它赋予不同的值就能在不同的大小屏幕上显示了。 我们在上面了解了什么是响应式布局,那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰,现在还要来个不同尺寸设备,我们该怎么淡定下来呢?有需求就会有解决方案,呵呵,说到响应式布局,就不得不提起CSS3中的Media Query(媒介查询),这可是个好东西,易用、强大、快捷……Media Query是制作响应式布局的一个利器,使用这个工具,我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于。如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。所以使用响应式媒体对象,就一定要学会meidia query查询。

所以响应式布局在html中是一个非常一个不错的设计理念,响应式布局给大家带来了许多的方便,让大家在不同的设备中也能看一些页面。