不久以前，设计师并不需要担心网站如何看待手机和平板电脑。手机在网络浏览方面还没有真正的实用性，而在 iPad 之前，平板电脑比起必备品更为新奇。
显然，所有这一切都发生了变化，大多数技术专家预测，在未来几年内，移动浏览可能会更早而不是更晚，因为移动浏览将超越桌面浏览，成为浏览网页的主要方式。
随著屏幕尺寸和装置的不断发展，包括视频游戏机和互联网电视，旧的设计方式根本不再适用。随著企业意识到需要优化移动多用户的线上体验，所以需要让自己的网站在每个客户端都能够拥有良好的体验。
响应设计的主要组成部分
响应设计的最基本的三个要素是灵活的网格，灵活的影像和媒体查询，后者作为 CSS3 的一部分引入。内容和布局，自动适应其浏览屏幕的大小，这就是响应式 WordPress 网站设计。
灵活网格
灵活的网格基本上是主题和模板，其中设计元素以百分比而不是画素设置。以百分比作为测量单位，这意味著设计为 50％的元素将始终占据屏幕的一半，无论屏幕多大或著多小。
灵活的影像
灵活的影像的建立通过写一个简单的规则，其中指出：
img {
最大宽度：100％;
}
基本上这意味著如果某个元素大于其容器，则该规则将强制其匹配该容器的宽度。而且由于现代浏览器按照比例调整影像的大小，影像宽高比也被保留。此外，100％的规则也可以用于几乎所有其他元素，如嵌入式视频。
媒体查询
自从 CSS 2.1 引入媒体类型以来，样式表已经更加包含移动装置和其他装置。媒体类型基本上允许造型定位特定类别的 Web 装置，其中包括手持装置，屏幕和电视机。但是由于装置之间的标准化程度不高，装置制造商几乎没有支持，媒体类型从未达到潜力。
媒体查询达到了这个潜力，然后是一些。但是，媒体查询不是像介质类型那样关注装置类型，而是检视装置的功能。
简单的媒体查询可能如下所示：
查询的两个元件是媒体类型，设置为屏幕，然后是实际查询 –（max-device-width：480px）– 这实质上是询问装置的宽度是 480px 或更少。如果是这样，装置载入 generic.css 。如果没有，链接将被忽略，与其他链接一样，直到找到正确的解析度，并载入了相应的样式表。
不仅仅是决议
解决方案决不是通过使用媒体查询来控制的唯一设计元素。浏览器视窗的宽度和高度，横向和纵向方向，甚至布局，都是可以设置的其他一些引数。
例如，如果媒体查询检测到装置是智慧手机，则可能会在计算机屏幕上显示带有文字区域和两个垂直侧边栏的三列的设计可能会在智慧手机屏幕上作为全形文字区域载入，两个侧杆作为下面的水平元素。
灵活的心态
当然，灵活设计的关键要求是设计师灵活的设计思维。不幸的是，大多数网页在移动装置上仍然不是那么的友善，主要是因为大多数设计师通常只是为桌面设计智慧手机和平板电脑。很少有设计师考虑到多个平台的设计。
虽然将媒体查询纳入样式表有一个学习曲线，但它是从设计到画素到设计的过渡，百分比阻止了一些 WooCommerce 独立站网页设计师。但实际上，百分比的设计确实没有什么差别，而且也比较容易。
例如，考虑将 100％和 100 画素的宽度分配给两个相同的元素之间的差异。在其中，您可以放心，元素将填满屏幕，无论是桌面，膝上型电脑还是 iPhone 的屏幕。但是，在 480 画素 iPhone 屏幕上，100 画素宽的元素会很大，但在 1600×900 解析度的桌面屏幕上却相当微小。
响应式设计意味著事业
对于企业而言，实施响应式设计的主要原因是显而易见的。潜在客户更容易浏览并找到所需内容，转化率越高。但对于许多设计师来说，针对商业网站的响应式设计通常意味著缩小内容大小以适应较小的屏幕。任何花在任何时间滚动并放大和缩小以查询他们正在寻找的信息的人都知道，一个微型版本的网站不是答案。
企业和设计人员处理移动装置设计问题的另一种方法是根据装置为具有自动重定向的不同装置建立一个单独的站点。这样可以提供最好的界面，同时避免由 javascript 和大影像造成的慢载入。
但是，这种方法存在一些缺点，其中一个是建立和维护多个站点以及协调这些站点内容的费用。当然，当一个新的装置出来的时候，还有一个新的网站要建成。幸运的是，响应式设计如果做得很好，可以解决移动装置设计中几乎所有的问题。
跨飞独立站 WordPress 外贸独立站网站建设平台-拥有十年 WordPress 外贸独立站网站建设经验，服务的企业超过 3000+，与国内多家知名企业合作，是您值得信赖的合作伙伴！想了解有几种网站的类型，点选检视吧!