廊坊网页设计：什么是响应式网站设计

2019.06.14 廊坊网页设计

150

不久前，设计师们并不需要担心网站在手机和平板电脑上的表现。手机在网络上还不太实用，而在iPad问世之前，平板电脑更多的是一种新奇的东西，而不是一种必不可少的东西。

显然，所有这些都发生了变化，大多数技术专家预测，在未来几年内，移动浏览将很快取代桌面浏览，成为浏览Web的主要方式。

随着屏幕尺寸和设备的不断发展，包括视频游戏机和网络电视，旧的网页设计方式已经不再适合这项任务了。随着企业意识到需要为移动用户优化他们的在线体验，不适应的设计师将被抛在后面。

编者注：廊坊网页设计下面是初学者对响应性设计的介绍，而不是为更有经验的网页设计师设计的。

响应设计的主要组成部分

这就是响应式网页设计的地方，内容和/或布局会自动适应屏幕的大小。最基本的是，响应性设计的三个主要要素是灵活的网格、灵活的图像和媒体查询，后者作为CSS3s的一部分引入。稍后会有更多的报道。

柔性网格

柔性网格基本上是主题和模板，在这些主题和模板中，设计元素是以百分比而不是像素来设置的。以百分比作为衡量单位，这意味着一个设计为50%的元素总是占据屏幕的一半，不管屏幕有多大或多小。

柔性图像

在他们最基本的时候，柔性图像通过编写一条简单的规则可以很容易地创建：

img {
     max-width: 100%;
}

本质上这意味着，如果一个元素大于其容器，则规则强制它与该容器的宽度匹配。由于现代浏览器按比例调整图像大小，图像的纵横比也被保留下来。此外，100%的规则也可以用于几乎所有其他元素，如嵌入式视频。

媒体查询

自引进以来媒体类型在CSS2.1中，样式表更多地包含了移动设备和其他设备。媒体类型基本上允许样式针对特定类别的网络设备，其中包括手持设备、屏幕和电视。但是，由于设备之间的标准化程度很低，设备制造商也很少提供支持，媒体类型无法发挥其潜力。

媒体查询发挥自己的潜力然后再发挥一些。但是，媒体查询并没有像媒体类型那样关注设备的类型，而是关注设备的功能。

简单的Media查询可能如下所示：

<link rel="stylesheet" type="text/css"
  media="screen and"
  href="generic.css" />

查询的两个组件是媒体类型，设置为屏幕，然后是实际查询-(max-device-width: 480px)-这实际上是询问设备的宽度是否为480 px或更小。如果是这样的话，设备将加载generic.css。否则，该链接将被忽略，其他链接也会被忽略，直到正确的解析和适当的样式表被加载为止。

不仅仅是决心

但是，分辨率绝不是唯一可以通过使用Media查询来控制的设计元素。浏览器窗口的宽度和高度，横向和纵向方向，甚至布局，都是可以设置的其他参数。

例如，如果媒体查询检测到设备是智能手机，那么可以在计算机屏幕上加载显示三列文本区域和两个垂直侧边栏的设计，可能会在智能手机屏幕上加载为全宽度文本区域，其中两个边栏作为水平元素。

灵活的心态

当然，灵活设计的一个关键要求是具有灵活设计思维的设计师。不幸的是，大多数网页在移动设备上仍然不那么友好，这主要是因为大多数设计师仍然只为桌面设计智能手机和平板电脑。很少有设计师在设计时考虑到多个平台。

虽然在将媒体查询整合到样式表中有一条学习曲线，但从像素设计到百分比设计的转变阻止了一些网页设计师。在现实中，虽然，真的没有太大的差别在设计百分比，这也更容易。

例如，考虑将100%的宽度和100像素的宽度分配给两个相同的元素之间的差异。首先，您可以确信元素将填充屏幕，无论是桌面屏幕、笔记本电脑还是iPhone屏幕。但是一个100像素宽的元素在480像素的iphone屏幕上会很大，而在1600×900分辨率的桌面屏幕上则相对较小。

响应设计意味着商业

廊坊网页设计对于企业来说，实现响应性设计的主要原因是显而易见的。对于潜在客户来说，导航和找到他们想要的东西越容易，转换率就越高。但对许多设计师来说，商业网站的响应性设计通常意味着缩小内容的大小以适应较小的屏幕。任何人谁花了任何时间滚动和放大，以找到他们正在寻找的信息，知道一个小型版本的网站不是答案。

企业和设计师处理移动设备设计问题的另一种方式是为不同的设备创建一个独立的站点，根据该设备自动重定向。这允许提供最佳的接口，并避免了JavaScript和大型图像造成的缓慢加载。

但是这种方法有很多缺点，其中之一当然是创建和维护多个站点和协调这些站点的内容的开销。当然，当一个新的设备出现时，还有另一个新的地点需要建造。幸运的是，响应性设计，如果做得正确，可以解决几乎所有的问题移动设备设计.