自适应设计（响应式设计）

通过平板电脑和手机访问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克，柱状