Html 如何为基于wordpress自定义主题的网站进行响应性设计？

我正在开发一个网站（基于WordPress自定义主题构建），在这个网站上我必须进行响应性的网页设计

在那个网站上，我必须复制PSD的手机设计，这样它在所有设备上看起来都很好

问题陈述：

该网站是建立在wordpress自定义主题上的

为了使网站具有响应性，我所做的是在完成inspect后查看HTML代码，我在wordpress的附加CSS部分中编写了CSS代码

下面是我创建的示例（其中HTML代码是从网站的inspect部分复制的）

fiddle中的HTML代码来自网站的inspect部分，我已经在wordpress网站的附加CSS部分添加了CSS代码

我使用的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>

2016
麦克马斯特大学
2016
TÉLUQOpen类别

---

我的问题是，如果它是正确的方式，使网站的响应性网页设计建立在wordpress自定义主题

这将分为两部分

对于响应灵敏的设计，您走在了正确的道路上。您正在CSS中使用媒体查询，没有问题。问题可能来自于试图构建一个尚未响应的自定义主题。但如果您还没有阅读过《移动第一设计》，我会鼓励您阅读《移动第一设计》

我们大多数人所做的是编写HTML和CSS主题，然后通过创建自定义主题与Wordpress相结合。可以通过两种方式创建自定义主题：

子主题是继承另一个主题（称为父主题）的功能和样式的主题。子主题是修改现有主题的推荐方式

选择什么主题取决于您自己，但理想情况下，您希望选择一个主题到子主题，该主题与您在Photoshop中创建的设计尽可能相似

还有一些模板可以用来开始主题开发，比如

好的，如果你有一个定制的主题，你可以选择直接编辑主题（如果你不知道主题创建者，我建议你不要这样做），从定制主题创建一个子主题，或者只是创建一个看起来相同的新主题（如果你不知道主题作者，我会小心）

对于CSS，新的设计标准是使用flexbox或CSS网格

您还可以使用CSS框架，该框架有两种选择：

基于组件的CSS框架

这是当有预先构建的组件，如导航、文章，有时还有modals时

基于组件的框架列表

• 引导
• 基础
• 延髓
• 具体化

或者您可以使用实用css框架，如tailwind css。实用程序框架通过向html结构中添加各种预先制作的类，使您能够更好地控制css的外观，而无需编写大量css

---

约翰，我认为你的思路是对的。您已将CSS放在附加CSS部分中。如果主题更新，附加CSS部分或子主题CSS将不会被覆盖。基于fiddle，您使用了媒体查询。“所以我认为你已经走上正轨了。”“哈姆扎艾哈迈德你好，哈姆扎，我也有类似的想法。我想知道你是否可以看一看。这与插件css有关。我的网站以前工作正常，但不知何故，手机视图中出现了css，这导致了设计的彻底改变。我不知道这些额外的css代码是如何显示的。谢谢你的详细解释。我已经从上面的Hamza那里问过了。我想知道你是否也可以看看。这与插件css有关。我的网站以前工作正常，但不知何故，手机视图中出现了css，这导致了设计的彻底改变。我不知道这些额外的css代码是如何出现的。