您现在的位置是：首页 > WordPress教程WordPress教程

WordPress如何制作响应式网站

WP集市 2025-09-01 【WordPress教程】 1731人已围观

首先你得有个WordPress站点，没的话先装一个，别问怎么装，网上教程多的是。装好后选个主题，现在大部分主题都自称响应式，但实际效果得自己测。我一般建议直接用Twenty Twenty-Four这种官方主题，基础响应已经帮你搞好了，省得折腾。
响应式的核心是CSS媒体查询（Media Queries），简单说就是根据屏幕宽度调整样式。比如在WordPress的自定义izer里加这段代码：
```
@media (max-width: 768px) {
.sidebar { display: none; }
.content { width: 100%!important; }
}
```
意思是手机屏幕小于768像素时侧边栏消失，内容区撑满全屏。别纠结!important好不好，能跑就行。
图片别用固定尺寸，否则手机上看会溢出。WordPress上传图片时默认带响应式class，但如果你硬要插代码，记得加：
```
<img src="图片地址" class="a2ea-18ab-5e73-278e alignnone size-full wp-image-123" style="max-width:100%; height:auto;">
```
max-width:100%让图片随容器缩放，height:auto防止变形。wp-image-123是WordPress自动生成的ID，不用管它。
网格布局用Flexbox或Grid，比如文章列表可以这样：
```
.post-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
```
auto-fit让列数自适应，minmax(300px,1fr)表示每列最少300像素，不够就折行。这段代码扔进主题的additional CSS里立马生效。
字体别用px，用rem或vw。在WordPress里全局调整：
```
html { font-size: 16px; }
@media (max-width: 480px) {
html { font-size: 3vw; }
}
```
手机端字体随视口变化，3vw表示屏幕宽度的3%，不会太小看不清。
菜单响应式处理常用到jQuery，WordPress本身带jQuery库，直接写：
```
jQuery(document).ready(function($) {
$('#menu-toggle').click(function() {
$('.nav-menu').slideToggle();
});
});
```
然后HTML里加个汉堡按钮，ID对应menu-toggle，菜单容器对应nav-menu。点击时菜单滑出，适合手机小屏幕。
最后用Chrome开发者工具模拟各种设备测试，F12打开点手机图标，拖拽窗口看效果。发现问题就回到WordPress自定义izer的CSS里修修补补。别追求完美，差不多就行，用户不会趴屏幕上像素级挑刺。