浅析响应式网站设计论文.docx

浅析响应式网站设计论文.docx

《浅析响应式网站设计论文.docx》由会员分享，可在线阅读，更多相关《浅析响应式网站设计论文.docx（5页珍藏版）》请在冰豆网上搜索。

浅析响应式网站设计论文

浅析响应式网站设计

　　摘要：

在移动互联网时代，相对于桌面端浏览器，用户已经越来越多地通过移动浏览器来访问网站，传统的网站布局并不能很好地适应这种多屏幕浏览需求，而响应式网站设计可以针对不同的终端显示不同的页面布局，实现一次开发多处适用。

着重从媒体查询、弹性布局、响应式图片等三个要素，具体分析了响应式网站的设计思路。

　　关键词：

响应式网站；媒体查询；弹性布局；响应式图片；

　　Abstract：

InthemobileInternetera,forthedesktopbrowser,usershavemoreandmoreusedthemobilebrowsertoaccessthesite,andthetraditionalsitelayoutisnotwelladaptedtothemultiscreenviewingneeds,andresponsivewebdesignsfordifferentterminalsdisplaydifferentpagelayouttoachieveanumberofapplicationdevelopment.Thispaperanalyzesthedesignideaofresponsivewebsitefromthreefactors,suchasmediaquery,elasticlayoutandresponsepicture.

　　Keyword：

responsivewebsite;mediaquery;elasticlayout;responsepicture;

　　0引言

　　在智能手机、平板电脑等移动设备普及之前，我们看到的网站几乎都是固定宽度的，其目标是让所有用户都拥有一样的浏览体验。

但随着移动设备用户数的高速增长，上网设备屏幕尺寸之间的差异越来越大，采用固定宽度布局的网站已经满足不了人们的上网需求。

面对不断扩展的移动设备和浏览器，响应式网站设计可以让一个网站同时适配多种设备和多种不同分辨率的屏幕，可以让网站的布局和功能随着用户屏幕大小、设备能力的不同而变化。

　　1媒体查询

　　媒体查询包含媒体类型和零个或多个检测媒体特性的表达式，width、height和color等特性都可以用于媒体查询，使用媒体查询，可以不用修改网页内容本身，就可以让同一个页面适配不同的设备。

CSS3规范包含很多模块，媒体查询只是其中一个模块。

利用媒体查询，网站开发人员可以根据显示设备的不同特性和能力来确定要应用的样式表。

比如，可以根据viewport的宽度、屏幕的宽高比和朝向（水平或垂直）,只用简单的CSS代码就可以达到改变网页内容的显示方式。

　　1.1媒体查询的设计方式

　　从原理上讲，位于样式表下方的CSS会覆盖上方的目标相同的CSS,除非上方的选择器优先级更高或者更具体。

因此，在设计页面时，我们可以在一开始设置一套基准样式，将其应用于不同版本的设计方案，这套样式表确保所有用户的基准浏览体验，然后再通过媒体查询覆盖原样式表中的相关部分。

例如，如果是在一个很小的viewport中，可以只显示文本导航或用较小的字体，而对于拥有较大空间的viewport,则可以通过媒体查询为文本导航加上icon图标。

下面是一个简单的示例，首先是基准样式：

　　.CardLink{display:

block;color:

#666;text-shadow:

02px0#efefef;height:

2em;

　　position:

relative;border-bottom:

1pxsolid#bbb;line-height:

2.75rem;}

　　接下来是针对屏幕宽度超过300像素的设备指定特殊的样式：

　　@media（min-width:

300px）{padding-left:

1.8rem;font-size:

16px;}

　　1.2关于视口的meta标签

　　为了利用媒体查询，网站应该让小尺寸的屏幕以其原生的大小来显示页面，而不是先在某个像素宽的窗口中渲染好，然后再让用户去放大或缩小。

2007年，苹果公司在发布iPhone的时候，引入了一个针对视口的meta标签，目前安卓系统和其他主流的手机操作系统都支持包含视口的meta标签，该标签是网页与移动浏览器的接口，网页通过这个标签告诉移动浏览器，它希望移动浏览器如何渲染当前页面。

　　在可以预见的未来，任何响应式网站的页面，如果想要在小尺寸的屏幕上得到良好的显示效果，都必须添加这个meta标签。

这个视口meta标签应该放在html中的head标签下，可以在其中设置具体的宽度或设置一个比例。

例如：

,我们把initial-scale属性的值设置为1.0,意思是让移动浏览器在其视口的宽度中渲染网页，将width属性设置为device-width就是要在所有支持的移动浏览器中，以100%的视口宽度来渲染网页。

　　2弹性布局

　　借助媒体查询，我们可以让网站根据浏览器窗口大小的不同而应用不同的样式表，但在窗口大小变化的过程中，不同样式表所呈现出来的效果并不是平滑过渡。

弹性布局就是用来解决这种问题的，在网站开发设计的过程中，以百分比的形式来定义页面的宽度，而不是以固定像素大小来定义页面宽度，这样就可以实现页面宽度随着浏览器窗口大小而变化。

　　2.1使用弹性比例

　　Illustrator、Photoshop等图形图像设计软件制作出来的图都是固定大小的，网站开发人员如果要在弹性布局的网页中使用这些图，那么就需要把固定像素转换为弹性比例，即用元素的大小除以元素所在容器的大小。

例如以下html代码就是使用弹性比例来设计布局：