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

wordpress制作响应式网站的步骤

寻真2023-06-26 22:11:33WordPress教程已有30人查阅

导读怎样制作WordPress响应式主题/模板？这个年代，没有用WordPress做过网站的根本不敢说自己做过网站。WordPress是什么？WordPress是世界大名鼎鼎的网站内容管理系统

wordpress制作响应式网站的步骤

怎样制作WordPress响应式主题/模板？这个年代，没有用WordPress做过网站的根本不敢说自己做过网站。WordPress是什么？WordPress是世界大名鼎鼎的网站内容管理系统（或者说博客/Blog系统），简称WP。据相关调查显示，2015年WordPress的市场份额全球高达48%，蝉联全球开源web网站系统。并且还在快速的增长中…综观国内开源的CMS，现在真正存活，保持更新的真心没有几家了。曾经叱咤风云的动易、dedecms、phpcms、帝国cms、phpwind、discuz等等，尚能饭否？

工具/原料

HTML5

CSS3

现代浏览器，如：Chrome、Firefox、Edge等

方法/步骤

1.简单的说就是，在网页头部（<head> </head>）之间加入以下查询代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2.然后在CSS文件中，加入媒介查询元素，如：

@media screen and (max-width:480px) {
//当浏览器屏幕小于480px时，此代码块生效
}
@media screen and (min-width:481px) and (max-width:720px) {
//当浏览器屏幕大于480px小于720px时，此代码块生效
}
@media screen and (min-width:721px) and (max-width:1079px) {
//当浏览器屏幕大于721px小于1079px时，此代码块生效
}