什么是响应式网站制作？

不久之前，设计师真的不需要担心网站在手机和平板电脑上的外观。手机尚未真正可以用于网络浏览，在iPad之前，平板电脑更是新颖而不是必不可少的。显然一切都已改变，大多数技术专家预测，在未来几年内，移动浏览将取代台式机浏览成为查看网站的主要方式，这很可能会早于而不是晚。 随着屏幕尺寸和设备（包括视频游戏机和互联网电视）的不断发展，旧的网站制作方式已完全无法满足任务。随着企业意识到有必要优化移动用户的在线体验，那些不适应的设计师将被甩在后面。响应式网站制作将取代传统的网站制作。本期道加云官网设计Angle就为大家好好聊聊什么叫响应式网站制作。 响应设计的主要组成部分 这就是响应式网站制作的用武之地，其内容和/或布局可自动适应查看其屏幕的大小。从根本上讲，响应式网站制作的三个主要元素是灵活的网格，灵活的图像和Media Queries，后者是CSS3的一部分。 1、柔性网格 柔性网格基本上是主题和模板，其中设计元素以百分比而非像素设置。以百分比为度量单位，这意味着设计为50％的元素将始终占据屏幕的一半，而不管屏幕的大小。 2、灵活的图像 从本质上讲，这意味着如果元素大于其容器，则规则会强制其匹配该容器的宽度。而且由于现代浏览器会按比例调整图像大小，因此图像长宽比也得以保留。而且100％规则也可以用于几乎所有其他元素，例如嵌入式视频。 3、媒体查询 自从CSS 2.1中引入“媒体类型”以来，样式表已经包含了更多移动设备和其他设备。媒体类型实质上允许样式针对特定类型的网站设备，这些类型包括手持设备，屏幕和电视。但是由于设备之间几乎没有标准化，设备制造商也很少提供支持，因此媒体类型永远无法发挥其潜力。媒体查询不但可以发挥这种潜力，还可以发挥一些潜力。但是媒体查询不是像媒体类型那样关心设备的类型，而是关注设备的功能。 4、不仅仅是分辨率 但是分辨率绝不是可以通过使用媒体查询来控制的唯一设计元素。浏览器窗口的宽度和高度，横向和纵向，甚至布局是可以设置的其他一些参数。例如，如果“媒体查询”检测到设备是智能手机，则可能会加载在计算机屏幕上显示三列带有文本区域和两个垂直侧边栏的设计，而可能会在智能手机屏幕上加载为全角文本区域，并带有两个侧边栏作为下方的水平元素。 5、灵活的心态 灵活设计的关键要求是具有灵活设计思想的设计师。不幸的是，大多数网页在移动设备上仍然不是那么友好，这主要是因为大多数设计人员通常还是将智能手机和平板电脑设计用于台式机。很少有设计师会考虑多个平台来进行设计。将媒体查询合并到样式表中存在一个学习曲线，但这是从使用像素进行设计到使用百分比进行设计的过渡，这使某些网站制作师停止了。实际上，按百分比进行设计实际上并没有太大差异，而且也更容易。例如，考虑将100％和100像素的宽度分配给两个相同的元素之间的差异。总之可以确保该元素将填充屏幕，无论是台式机，笔记本电脑还是iPhone的屏幕。但是宽度为100像素的元素在480像素的iPhone屏幕上会很大，而在分辨率为1600×900的台式机屏幕上会很小。 对于企业而言，实施响应式网站制作的主要原因很明显。潜在客户越容易导航并找到他们想要的东西，转换率就越高。但是对于许多设计师而言，针对企业网站的响应式设计通常意味着仅缩小内容的大小以适合较小的屏幕。任何花时间浏览，放大和缩小以查找所需信息的人都知道，微型网站不是解决方案。企业和设计师处理移动设备设计问题的另一种方法是为不同的设备创建单独的站点，并根据设备自动重定向。这样可以提供最佳的界面，并避免由JavaScript和大图像引起的缓慢加载。但是这种方法有很多缺点，当然其中一个缺点是创建和维护多个站点以及在这些站点之间协调内容的开销。当有新设备问世时，还有另一个新站点要建立。幸运的是，如果正确完成，响应式网站制作可以解决移动设备设计中的几乎所有问题。

转载请保留出处及原文地址:/index.php?r=article/Content/index&content_id=1478