浅析响应式网站设计

时间:2019-09-27

　　摘要：在移动互联网时代， 相对于桌面端浏览器， 用户已经越来越多地通过移动浏览器来访问网站， 传统的网站布局并不能很好地适应这种多屏幕浏览需求， 而响应式网站设计可以针对不同的终端显示不同的页面布局， 实现一次开发多处适用。着重从媒体查询、弹性布局、响应式图片等三个要素， 具体分析了响应式网站的设计思路。

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

　　Abstract：In the mobile Internet era, for the desktop browser, users have more and more used the mobile browser to access the site, and the traditional site layout is not well adapted to the multi screen viewing needs, and responsive web designs for different terminals display different page layout to achieve a number of application development.This paper analyzes the design idea of responsive website from three factors, such as media query, elastic layout and response picture.

　　Keyword：responsive website; media query; elastic layout; response picture;
 

　　0 引言

　　在智能手机、平板电脑等移动设备普及之前， 我们看到的网站几乎都是固定宽度的， 其目标是让所有用户都拥有一样的浏览体验。但随着移动设备用户数的高速增长， 上网设备屏幕尺寸之间的差异越来越大， 采用固定宽度布局的网站已经满足不了人们的上网需求。面对不断扩展的移动设备和浏览器， 响应式网站设计可以让一个网站同时适配多种设备和多种不同分辨率的屏幕， 可以让网站的布局和功能随着用户屏幕大小、设备能力的不同而变化。

　　1 媒体查询

　　媒体查询包含媒体类型和零个或多个检测媒体特性的表达式， width、height和color等特性都可以用于媒体查询， 使用媒体查询， 可以不用修改网页内容本身， 就可以让同一个页面适配不同的设备。CSS3规范包含很多模块， 媒体查询只是其中一个模块。利用媒体查询， 网站开发人员可以根据显示设备的不同特性和能力来确定要应用的样式表。比如， 可以根据viewport的宽度、屏幕的宽高比和朝向 （水平或垂直） , 只用简单的CSS代码就可以达到改变网页内容的显示方式。

　　1.1 媒体查询的设计方式

　　从原理上讲， 位于样式表下方的CSS会覆盖上方的目标相同的CSS, 除非上方的选择器优先级更高或者更具体。因此， 在设计页面时， 我们可以在一开始设置一套基准样式， 将其应用于不同版本的设计方案， 这套样式表确保所有用户的基准浏览体验， 然后再通过媒体查询覆盖原样式表中的相关部分。例如， 如果是在一个很小的viewport中， 可以只显示文本导航或用较小的字体， 而对于拥有较大空间的viewport, 则可以通过媒体查询为文本导航加上icon图标。下面是一个简单的示例， 首先是基准样式：

　　.Card Link{display:block;color:#666;text-shadow:0 2px 0#efefef;height:2em;

　　position:relative;border-bottom:1px solid#bbb;line-height:2.75rem;}

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

　　@media （min-width:300px） {padding-left:1.8rem;font-size:16px;}

　　1.2 关于视口的meta标签

　　为了利用媒体查询， 网站应该让小尺寸的屏幕以其原生的大小来显示页面， 而不是先在某个像素宽的窗口中渲染好， 然后再让用户去放大或缩小。2007年， 苹果公司在发布i Phone的时候， 引入了一个针对视口的meta标签， 目前安卓系统和其他主流的手机操作系统都支持包含视口的meta标签， 该标签是网页与移动浏览器的接口， 网页通过这个标签告诉移动浏览器， 它希望移动浏览器如何渲染当前页面。

　　在可以预见的未来， 任何响应式网站的页面， 如果想要在小尺寸的屏幕上得到良好的显示效果， 都必须添加这个meta标签。这个视口meta标签应该放在html中的head标签下， 可以在其中设置具体的宽度或设置一个比例。例如：<meta name=“viewport”content=“width=device-weidth, initial-scale=1.0”/>, 我们把initial-scale属性的值设置为1.0, 意思是让移动浏览器在其视口的宽度中渲染网页， 将width属性设置为device-width就是要在所有支持的移动浏览器中， 以100%的视口宽度来渲染网页。

　　2 弹性布局

　　借助媒体查询， 我们可以让网站根据浏览器窗口大小的不同而应用不同的样式表， 但在窗口大小变化的过程中， 不同样式表所呈现出来的效果并不是平滑过渡。弹性布局就是用来解决这种问题的， 在网站开发设计的过程中， 以百分比的形式来定义页面的宽度， 而不是以固定像素大小来定义页面宽度， 这样就可以实现页面宽度随着浏览器窗口大小而变化。

　　2.1 使用弹性比例

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

　　<div class=“Wrap Middle”>

　　<div class=“Left”></div>

　　<div class=“Middle”>

　　<div class=“Right”></div>

　　</div>

　　其中CSS代码如下：

　　.Wrap Middle{width:100%;font-size:0;}

　　.Left, .Middle, .Right{display:inline-block;}

　　.Left{height:625px;width:20.8333%;background-color:#03a66a;}

　　.Middle{height:625px;width:68.75;background-color:#bbbf90;}

　　.Right{height:625px;width:10.4166%;background-color:#03c646;}

　　2.2 使用Flexbox

　　既有的布局技术， 比如行内块、浮动等都有一定的缺陷。行内块会在html元素间渲染空白， 但大多数的网站开发人员都希望把这类空白去掉。如果给浮动元素的宽度设定百分比， 那么最终计算值在不同平台上的结果不一样， 于是有时候某些区块会跑到其他区块下面去， 而有的时候这些区块一侧又会出现一些明显的空隙。

　　利用Flexbox可以解决上述既有布局技术的显示机制问题， 它有4个关键特性：方向、对齐、次序和弹性， 可以方便地垂直居中内容， 可以改变元素的显示顺序， 会在盒子中自动插入空白以对齐元素。例如以下html代码可以实现一个简单的导航布局：

　　<div class=“Menu Wrap”>

　　<a href=“#”class=“List Item”>Home</a>

　　<a href=“#”class=“ListItem”>About Us</a>

　　<a href=“#”class=“Last Item”>Contact Us</a>

　　</div>

　　对应的CSS代码如下：

　　.Menu Wrap{min-height:2.75rem;display:flex;align-items:center;padding:0 1rem;}

　　.List Item{color:#efefef;margin-right:1rem;}

　　.Last Item{color:#efefef;margin-left:auto;}

　　3 响应式图片

　　响应式图片就是根据用户的设备和使用场景提供合适的的图片， 让拥有不同分辨率的屏幕看到不同分辨率的图片， 即可以根据视口大小的不同而显示不同的图片。

　　3.1 通过srcset切换分辨率

　　例如一张图片有3个不同的版本， 分别对应不同的分辨率， 可以通过以下代码让浏览器知道这三个版本：

　　<img src=“sky_small.jpg”srcset=“sky_medium.jpg 1.5x, sky_large.jpg 2x”alt=“sky in the summer”/>

　　其中src属性除了指定图片的原始大小外， 还有一个作用是：当浏览器不支持srcset属性时可以当作备用图片。对于支持srcset属性的浏览器， 通过不同的分辨率， 浏览器可以自己决定选择哪一张图片。

　　3.2 通过sizes切换

　　在响应式网站设计中， 图片在小屏幕中全屏显示， 而在大屏幕中只显示图片的一半， 要实现这种功能可以利用sizes属性：

　　<img src=“stone_small.jpg”alt=“stone”srcset=“stone_small.jpg 450w, stone_medium.jpg 900w”sizes=“ （min-width:17em） 100vw, （min-width:40em） 50vw”/>

　　在指定图片时， 通过添加w后缀来告诉浏览器图片的宽度， 在最小宽度为17em的设备中， 图片显示的宽度为100vw, 如果设备的宽度大于40em, 则对应的图片显示宽度为50vw。

　　3.3 利用picture标记

　　如果希望为不同大小的视口提供不同的图片， 还可以借助于picture元素：

　　<picture>

　　<source media=“ （min-width:30em） ”srcset=“desk.jpg”>

　　<source media=“ （min-width:60em） ”srcset=“room.jpg”>

　　<img src=“school.jpg”alt=“fzfu”>

　　</picture>

　　其中picture元素只是一个容器， 如果想给图片添加样式， 还是要加到里面的img标签。source标签可以使用媒体查询明确告诉浏览器在什么条件下使用该图片。picture标签还支持提供可替换的图片格式， 比如webp格式。

　　4 结束语

　　随着智能手机等移动设备的普及， 用户越来越频繁地使用移动设备来浏览网站， 因此如果开发人员设计出来的网站只能够在PC显示器中正确显示， 而在移动设备中的浏览体验并不友好， 那么将在很大程度上流失用户对该网站的关注量。响应式或移动优先的设计理念， 在设计网站时已经考虑多种屏幕的尺寸以及对应的用户体验， 是目前以及未来多年内网站开发技术发展的一个趋势。

　　参考文献
　　[1]胡佳锋。新媒体Web技术的研究与实现[D].北京：中国地质大学， 2016.
　　[2]吴多智， 陈益全。响应式网页设计案例实现与分析[J].安徽电子信息职业技术学院学报， 2016 （02） .
　　[3]张坤。响应式设计分析及其与web应用程序的对比研究[J].攀枝花学院学报， 2016 （02） :29-31.
　　[4]张贺， 陈锦昌。基于响应式的移动门户网站构建[J].现代计算机：专业版， 2015 （30） :48-52.

TAG标签： 媒体查询  弹性  

上一篇：研究数学算法在计算机编程中的应用分析
下一篇：浅析网站设计与实现