自适应设计(响应式设计)

自适应设计

通过平板电脑和手机访问Internet的用户正在增加。 正如您已经知道的那样,这意味着仅设计一个在我们的计算机上看起来不错的好的网页是不够的:还必须在每个移动设备上看到它。 问题? 不同的屏幕尺寸和分辨率。 这就是为什么很难做出适合所有媒体的设计的原因(著名的 响应设计,翻译为 适应性设计).

进行具有这些特征的设计时,请记住以下提示。 请注意!

自适应设计的技巧

  1. 制作一个简单的模板简单地说,我不是说平淡。 我说的是 结构 网站的HTML:越清晰越好。 请记住,计算机屏幕可以容纳三个垂直列。 在手机屏幕上,您只能容纳一个。 考虑一下,以及如何重新定位元素。
  2. 消除不必要的一切避免使用jQuery效果,Flash动画和其他任何会减慢页面加载速度的代码。 这种类型的内容越少,Web加载速度越快。
  3. 定义样式 每个“大小”的CSS(例如)创建一个tiny.css,small.css和big.css,该设备基于查看该设备的设备运行。 例如:

    @import url(tiny.css)(最小宽度:300像素);

    @import url(small.css)(最小宽度:600像素);

    @import网址(big.css)(最小宽度:900像素);

  4. 最常用的分辨率320像素/ 480像素/ 720像素/ 768像素/ 900像素/ 1024像素
  5. 使您的模板灵活尽可能使用百分比而不是固定金额。 以下是一些等效的参考:200px = 15'38%/ 300px = 23'07%/ 800px = 61'5384615384%
  6. 版式 比以往任何时候都更加重要有时您的设备屏幕可能很小,以至于您只能看到文本。 这就是为什么我们必须在网站上非常仔细地选择最好的字体,以便当它们减小尺寸时不会失去可读性。 另外,我们必须知道如何将更多中性字体与具有个性的其他字体组合在一起,从而赋予网络必要的字符。 因此,第一个技巧是您花时间选择要使用的字体。
  7. 使用 高质量图像随着空间的缩小,图像将伴随它。 选择在缩小时不会损失质量的对象,以及在缩放时仍能工作的对象。 品质不佳的图片会使您的网站看起来很糟糕。
  8. 总是看到您的图像 满的通过在CSS中添加img(宽度:100%;)代码来防止照片被剪掉。 这样,您告诉设备重新计算要赋予图像的高度,以便可以看到其宽度的百分之一百。
  9. 全部低 相同的网址忘记像www.mysite.com/mobile之类的子域,因为根文件夹中的相同index.html文件适用于所有设备(如果您正确地进行了自适应设计)。 您已经知道优点:子域越少,页面加载速度就越快。
  10. 利用支持:富于想象力从台式机访问网站与从iPad或手机访问网站不同。 首先,您将以一种轻松自在的方式导航。 对于后者,您将在空闲时间执行此操作,并在感到无聊时立即关闭窗口。 利用这些条件来娱乐用户,并使他们在几分钟内会献给您的乐趣中。 也许当他回到家时,他会决定以一种更轻松的方式再次拜访您。
  11. 激发灵感 在数字出版物中,您会想知道为什么要这样做。 非常简单: 电子杂志 (很好)知道如何利用支持,他们的设计非常聪明。 从他们那里得到启发,创建一个很难离开的网站。

更多信息 - 电子杂志

资源 - 斯波利奥960克,柱状


本文内容遵循我们的原则 编辑伦理。 要报告错误,请单击 信息.

3条评论,留下您的评论

发表您的评论

您的电子邮件地址将不会被发表。 必填字段标有 *

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。

  1.   DídacRios

    有些事情我不太同意。
    在第5点中...由于200px = 15,38%,且随后的值...如果没有任何父级度量,则无法进行此参考比较,因此,每个像素的大小不是相对度量,例如百分比!

    指定宽度的图像:100%错误,我不建议您这样做。 图片更好地定义了它们的宽度和高度,因此服务器花费更少的时间来处理信息(不必计算其大小),并且我们提高了页面的加载速度(这在自适应或响应式Web设计中非常重要) )。

    我已经将其包括在内,即使它有点鼻子...视网膜屏幕的图像。 如果我们想进行响应式网页设计,则必须使用图像进行视网膜显示,因为很大一部分手机和平板电脑视图使用这些屏幕。 因此,以半节流的方式为它们进行设计是没有意义的。

    其余的好

    1.    DídacRios

      在第5点中,他们将您置于上下文中,并告诉您有关1300px的总布局,其中包含3列(200、300和1000之一)。

      如果将其传递给百分比,那么按照您的说法,它们就是15,38%((200 * 100)/ 1300)(以下十进制,国际体系:P)

      但是,如果我们谈论一个500px的布局,并且有3列,一列为200,另一列为200,另一列为100px,则百分比不再相同,在这种情况下,200px = 40%((200 * 100)/ 500)

      它们将是:200px = 40%和100px = 10%

      来吧,正如我评论的那样,它们并不是您所引用的参考,它们仅是1300px布局上的参考。

      问候

      1.    卢阿罗罗

        多么失败,您绝对是世界上正确的! 再次感谢 ;)