如何为基于 wordpress 自定义主题的网站进行响应式设计？
How to make responsive design for the website built on wordpress custom theme?
我在一个网站上工作（建立在 WordPress 自定义主题上），我必须在其中进行响应式网页设计。
在该网站中，我必须从 PSD 复制移动设计，以便它在所有设备上看起来都不错。
问题陈述：
网站是建立在wordpress自定义主题之上的。
为了使网站响应，我所做的是在检查后看到 HTML 代码，我在 Additional [=44] 中编写了 CSS 代码=] wordpress 的 部分。
这是我创建的示例 fiddle （其中 HTML 代码是从网站的检查部分复制的）。
fiddle 中的 HTML 代码来自网站的检查部分，我在 Additional [=44] 中添加了 CSS 代码=] wordpress 网站的部分。
我使用的 HTML 代码片段是：
<tr class="alt">
<td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
<a href="">Hello World</a></td><td id="gv-field-6-31" class="gv-field-6-31">McMaster University</td><td id="gv-field-6-25" class="gv-field-6-25"></td>
</tr>
<tr class="">
<td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
<a href="">Hello Universe</a></td><td id="gv-field-6-31" class="gv-field-6-31">TÉLUQ</td><td id="gv-field-6-25" class="gv-field-6-25">Open Category</td>
</tr>
我的问题是，为基于 wordpress 自定义主题的网站制作响应式网页设计是否正确？
这会有两部分。
对于响应式设计，您走在正确的道路上。您正在 CSS 中使用媒体查询，没有问题。问题可能来自于尝试构建一个尚未响应的自定义主题。但如果您还没有阅读 移动优先设计，我会鼓励您阅读。
我们大多数人所做的是编写 HTML 和 CSS 主题，然后通过创建自定义主题将其与 Wordpress 结合。您可以通过两种方式创建自定义主题：
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
这取决于您想要选择什么主题，但理想情况下，您希望选择一个与您在 Photoshop 中创建的设计尽可能相似的子主题。
Or by creating your own theme(Link to great starter playlists.) There also templates you can use to start your theme development such as underscores
好的，鉴于您正在处理自定义主题，您可以选择直接编辑主题（如果您不认识主题创建者，我建议您不要这样做），从自定义主题，或者只是制作一个看起来相同的新主题（如果您不知道主题作者，我会小心这一点）。
CSS 新的设计标准是使用 flexbox 或 CSS 网格。 Here's a great article on those.
您也可以使用 CSS 框架，您有两种选择：
基于组件的CSS框架
这是在有预建组件的情况下，例如导航、文章，有时还有模态框。
基于组件的框架列表
- Bootstrap
- 基金会
- 布尔玛
- 具体化
或者您可以使用像 tailwind css 这样的实用程序 css 框架。实用程序框架使您可以更好地控制 css 的外观，而无需实际编写很多 css，只需将各种预制的 类 添加到 html 结构即可。
我在一个网站上工作（建立在 WordPress 自定义主题上），我必须在其中进行响应式网页设计。
在该网站中，我必须从 PSD 复制移动设计，以便它在所有设备上看起来都不错。
问题陈述：
网站是建立在wordpress自定义主题之上的。
为了使网站响应，我所做的是在检查后看到 HTML 代码，我在 Additional [=44] 中编写了 CSS 代码=] wordpress 的 部分。
这是我创建的示例 fiddle （其中 HTML 代码是从网站的检查部分复制的）。
fiddle 中的 HTML 代码来自网站的检查部分，我在 Additional [=44] 中添加了 CSS 代码=] wordpress 网站的部分。
我使用的 HTML 代码片段是：
<tr class="alt">
<td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
<a href="">Hello World</a></td><td id="gv-field-6-31" class="gv-field-6-31">McMaster University</td><td id="gv-field-6-25" class="gv-field-6-25"></td>
</tr>
<tr class="">
<td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
<a href="">Hello Universe</a></td><td id="gv-field-6-31" class="gv-field-6-31">TÉLUQ</td><td id="gv-field-6-25" class="gv-field-6-25">Open Category</td>
</tr>
我的问题是，为基于 wordpress 自定义主题的网站制作响应式网页设计是否正确？
这会有两部分。
对于响应式设计，您走在正确的道路上。您正在 CSS 中使用媒体查询，没有问题。问题可能来自于尝试构建一个尚未响应的自定义主题。但如果您还没有阅读 移动优先设计，我会鼓励您阅读。
我们大多数人所做的是编写 HTML 和 CSS 主题，然后通过创建自定义主题将其与 Wordpress 结合。您可以通过两种方式创建自定义主题：
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
这取决于您想要选择什么主题，但理想情况下，您希望选择一个与您在 Photoshop 中创建的设计尽可能相似的子主题。
Or by creating your own theme(Link to great starter playlists.) There also templates you can use to start your theme development such as underscores
好的，鉴于您正在处理自定义主题，您可以选择直接编辑主题（如果您不认识主题创建者，我建议您不要这样做），从自定义主题，或者只是制作一个看起来相同的新主题（如果您不知道主题作者，我会小心这一点）。
CSS 新的设计标准是使用 flexbox 或 CSS 网格。 Here's a great article on those.
您也可以使用 CSS 框架，您有两种选择：
基于组件的CSS框架
这是在有预建组件的情况下，例如导航、文章，有时还有模态框。
基于组件的框架列表
- Bootstrap
- 基金会
- 布尔玛
- 具体化
或者您可以使用像 tailwind css 这样的实用程序 css 框架。实用程序框架使您可以更好地控制 css 的外观，而无需实际编写很多 css，只需将各种预制的 类 添加到 html 结构即可。