4008-888-888
9490489@qq.com

如何去设计一个自适应的网页设计或HTMl5

  核心提示:如何在不同尺寸的设备上显示相同的网页?

  随着3G的普及,移动互联网越来越普及,随之而来的是更多的需求!应用程序应用程序市场和应用程序数量呈指数级增长!从而给移动互联网带来新的挑战!

  移动设备正在取代台式设备成为最常见的互联网接入终端。结果,网页设计者不得不面对一个难题:他们如何在不同尺寸的设备上呈现相同的网页?

  手机的屏幕相对较小,宽度通常在600像素以下。个人电脑的屏幕宽度一般在1000像素以上(目前主流宽度为1366×768),有些达到2000像素。在不同大小的屏幕上显示相同内容的满意结果并不容易。许多

  网站的解决方案是为不同的设备提供不同的网页,例如手机版或iPhone/iPad版。这确保了效果,但是这很麻烦,并且需要同时维护几个版本。此外,如果一个网站有多个门户,将大大增加架构设计的复杂性。

  因此,一些人一直认为“一次设计,通用”是可能的,这样同一网页就可以自动适应不同大小的屏幕,并根据屏幕宽度自动调整布局?

  1。了解什么是“适应性网页设计”

  自2010年以来,伊森·马科特提出了“响应性网页设计”这一术语,它指的是能够自动识别屏幕宽度并做出相应调整的网页设计

  他创造了一个例子,展示了《福尔摩斯探秘》中六个主角的头像。如果屏幕宽度大于1300像素,则在一行中并排排列6张图片。

  如果屏幕宽度在600像素和1300像素之间,这6张图片将被分成两行

  如果屏幕宽度介于400像素和600像素之间,导航栏将移动到网页的顶部

  如果屏幕宽度小于400像素,6张图片被分成3行

  mediaqueri.es .上面还有更多这样的例子。

  这里也是一个测试小工具,它可以在网页上同时显示不同分辨率屏幕的测试结果。我建议安装

  2,需要允许网页宽度自动调整

  “自适应网页设计”如何工作?事实上,这并不难

  首先,将一行视口元标记添加到网页代码的标题中

  视口是网页的默认宽度和高度。上述代码行表示默认情况下网页宽度等于屏幕宽度(width=设备宽度),原始比例(初始比例=1)为1.0,即网页的初始大小占屏幕面积的100%。

  所有主流浏览器都支持此设置,包括IE9对于那些旧的浏览器(主要是IE6、7和8),需要css3-media query . js。

  3。设计时不能使用绝对宽度

  。由于网页根据屏幕宽度调整布局,因此不能使用绝对宽度布局和具有绝对宽度的元素。这篇文章非常重要具体来说,CSS代码不能指定像素宽度:

  宽度:XXX像素;

  只能指定百分比宽度:

  宽度:xx %;

  或

  宽度:自动;

  4,相对大小字体

  字体不能使用绝对大小(px),而只能使用相对大小(em)

  正文{

  字体:普通100% Helvetica,Arial,无衬线;高于

  }

  的代码指定字体大小为默认页面大小的100%,即16个像素

  h1 {

  字号:1.5em

  }

  然后,h1是默认大小的1.5倍,即24个像素(24/16=1.5)

  小{

  字号:0.875em

  }

  小元素的大小是默认大小的0.875倍,即14个像素(14/16=0.875)

  5、流体网格或瀑布

  “流动布局”意味着每个区块的位置是浮动的,而不是固定的

  。主{

  float:右;

  宽度:70%;

  }

  。left BAr {

  float:left;

  宽度:25%;

  }

  浮动的优点是,如果宽度太小,无法容纳两个元素,则后面的元素将自动滚动到前面元素的底部,而不会在水平方向溢出,从而避免出现水平滚动条。

  另外,绝对位置的使用也应该非常小心。

  12全文阅读

2014-2018 深圳市佳为科技有限公司 版权所有
粤ICP12032518