基础的网页设计涵盖了几大重要环节：

“
前期的原型设计(工具：Axure，Mockplus)

UX设计(工具：Justinmind)

UI设计(工具：Sketch)

后期的前后端，HTML，CSS， JS.

而做好自适应网页设计则需要遵循以下几个步骤：

Step 1：Meta 标签

为了适应屏幕，不少移动浏览器都会把HTML页面置于较大视口宽度(一般会大于屏幕宽度)，你可以使用viewport meta标签来设定。以下viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放：

Step 2. HTML结构

在这个例子中，页面布局包括 Header， Content， Sidebar和Footer. Header固定高度为180px， Content宽600px， Sidebar宽300px。



Step 3. Media Queries

CSS3 media query是自适应网页设计的关键，就像高级语言里的if条件语句，告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)来渲染网页。

三、自适应网页设计范例

目前很多网站在PC端和手机端已经采用了自适应设计，在不同的设备上浏览网页时已经可以很好的体验到自适应网页设计。比如，Amazon， USA Today， Apple， and About.com等。但自适应设计在移动网站上显示的布局可能与桌面版本会有所不同。所以，做自适应网页设计时，设计师需要做更多的工作来满足至少 6 种常见的布局需求。

这里有一些优秀的自适应网页设计范例供各位设计师朋友参考。

1. Amazon

与使用自适应网页设计(如CNN)的其他网站类似，亚马逊鼓励用户下载其品牌应用。 据报道，通过采用自适应设计，亚马逊移动端的访问速度比以往的响应式网页设计提高了40%。并且，此外，亚马逊的自适应网站为移动用户提供了在移动设备上使用“Amazon.com全站点”的机会，而响应式设计并不会提供。



2. Apple

苹果的设计向来以简洁著称，不论是它的网站、商店，还是产品设计无不体现着这一主题。没有采用响应式网页设计，这一点让苹果饱受诟病。毕竟，它的一系列智能产品就是响应式设计存在的原因之一。现在，苹果采用了自适应网页设计，这也意味着苹果的官网将会随着设备类型和功能做出改变。



3. Avenue 32

在线奢侈品购物网站Avenue 32 是一家采用自适应网页设计的典范。该品牌的特色是设计师与Usablenet合作，创造出无缝，直观和极具视觉吸引力的移动和平板电脑体验。根据Usablenet的说法，桌面版网站上充满了内容丰富的网页，包括产品图片，设计师细节，策展的外观等等，这个品牌必须创建一个视觉和功能上与这种桌面体验一致的多渠道网络产品。

Usablenet首席营销官Carin van Cuuren表示：“采用自适应网页设计使Avenue 32 能够突出其移动端的发现和商务功能，从而使客户能够随时随地浏览和购物。 “而且，智能手机和平板电脑的订单增长了40%，移动流量翻了一番，平均移动交易增长了27%。”


更多深圳网站维护,深圳网站托管,深圳网站建设,深圳网站推广资讯点击首页。
返回