这次我们将带您了解如何制作任何 响应式 WordPress 网站移动优先 以及为什么需要这样做。

随着移动和其他手持设备以及游戏、应用程序、社交媒体平台等的大量增长，响应式网页设计已成为您的网站脱颖而出的必需品，而不是奢侈品。

响应式或移动友好设计被视为与专门开发良好且昂贵的网站相关的优质品质的日子已经一去不复返了。

今天，WordPress 模板库中包含丰富的此类主题：免费和高级。 我们在 SKT Themes 创作的所有模板也具有相同的品质，让基于它的任何一方都能在不同的手机和平台上准确显示。

那么，如果响应式或移动友好的设计被广泛使用并且看起来运行顺利，那么尝试让任何响应式 WordPress 网站首先移动的意义何在？这样做有哪些好处？

为了让您了解所有事情，让我们一个接一个地讨论某些要点，以便您了解这两种设计方法之间的差异。

什么是响应式网页设计？

简而言之，响应式网页设计是一种现代技术，可以创建一个适合在每台设备上同样运行并匹配任何屏幕分辨率的网站。 这意味着您没有义务为您的网站构建一个单独的移动版本来满足移动用户在旅途中或移动中的需求。 您网站的响应式设计将自动调整并适应任何移动设备或设备，以获得您网站的完美外观。
随着全球数百万人使用移动互联网并花费数小时，拥有一个响应迅速且跨移动兼容的网站是必须的。

什么是移动优先设计？

基本上，移动优先是现代网页设计中使用的一种方法，意味着首先为移动屏幕设计，然后传递到其他屏幕、浏览器和分辨率的开发。

为了让您了解响应式设计方法和移动优先设计方法之间的区别，让我们声明响应式设计从完美的桌面性能所需的各种复杂性开始，然后在移动设备和较小的设备上将它们分开。

至于移动优先设计，建议先做针对手机和小型设备的响应式设计。

为什么您需要首先让任何响应式 WordPress 网站移动？

想知道为什么您需要从移动设备开始项目或首先让任何响应式 WordPress 网站移动？ 让我们看一下移动消费的统计数据。

如果您到目前为止没有猜到，只需在互联网上搜索确切的百分比和报告，证明移动互联网用户的普及率超过了桌面用户。

目前，人们花费越来越多的时间在互联网上浏览移动端和设备端所需的信息。 而且，从桌面使用到移动使用的这种转变自然会在不久的将来继续。

因此，您不想让大多数网站访客失望，也不想让少数桌面用户对您的网站感到满意，对吧？

除此之外，一旦您采用移动优先方法的做法，您会发现您将更少地参与编码，并且将能够设计更准确和更紧凑的网页设计，这些设计将更容易一起扩展。

首先确保像素与较小的屏幕完美匹配，然后再处理桌面屏幕，这可能是提升您网站的移动性能并为您的移动武装客户提供更好的用户环境的终极方式。

如何首先让任何响应式 WordPress 网站移动？

如果您的网站已经响应，并且您想先将其转换为移动设备，则需要遵循 2 个基本步骤。 首先，您需要为小屏幕编写和创建默认样式。

然后，您需要在使用 min-width 时添加媒体查询，并将响应式模板的默认样式复制到其中。

根据您网站的布局，布局样式可以是这样的：

header,
.main,
footer {
width: 96%;
max-width: 1000px;
margin: 10px auto;
clear: both;
}
.content {
width: 60%;
margin-right: 5%;
float: left;
}
.sidebar {
width: 35%;
float: right;
}

由于您的网站是响应式的，因此此样式还应包括针对较小屏幕的媒体查询：

@media screen and ( max-width: 500px ) {
header,
.main,
footer,
.content,
.sidebar {
width: 98%;
}
.content,
.sidebar {
float: none;
margin: 0 auto;
}
}

如您所见，有两个块：一个用于桌面，一个用于移动。
为了首先用移动设备替换它，删除两者并从定义小屏幕的布局开始：

header,
.main,
footer {
margin: 10px 1%;
}

现在，是时候使用 min-width 创建媒体查询了。

@media screen and ( min-width: 500px ) {
header,
.main,
footer {
width: 96%;
max-width: 1000px;
margin: 10px auto;
clear: both;
}
.content {
width: 60%;
margin-right: 5%;
float: left;
}
.sidebar {
width: 35%;
float: right;
}
}

如您所见，它与您网站的响应式样式表中的样式基本相同。 但是，样式的这种重写和重新排列与更好的移动性能有关，因为较小的设备现在会忽略它，而不是通过它，然后使用已添加到响应式媒体查询的元素运行它。

从理论上讲，我们已经完成了向移动优先设计的转变。 在特定情况下，您可能需要额外的调整和配置以保持事情顺利进行。

但是，即使您不是经验丰富的网页设计师或开发人员，让您的 WordPress 网站首先移动的整个过程对您来说也不是一条不可逾越的道路。