如何制作一个响应式的wordpress

如何制作WordPress响应式主题/模板？

这个时代，没有用WordPress做过网站的人，根本不敢说自己做过。什么是WordPress？WordPress是世界著名的网站内容管理系统(或博客/博客系统)，简称WP。据相关调查显示，2015年，WordPress在全球的市场份额高达48%，在全球获得开源网站系统的称号。而且还在快速增长……纵观国内开源的CMS，真正存活下来并保持更新的只有几家。曾经叱咤风云的东易、dedecms、phpcms、帝国cms、phpwind、discuz等还能吃吗？

工具/原材料

HTML5

CSS3

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

相关:WordPress教程

方法/步骤

1.简单来说，在网页的头部(< head & gt& lt/head & gt；之间添加以下查询代码):

& ltmeta name = & quot视窗& quotcontent = & quot宽度=设备-宽度，初始-比例= 1.0 & quot/& gt；2.然后在CSS文件中，添加媒体查询元素，例如:

@ mediascreenand(max -width:480px){//此代码块在浏览器屏幕小于480px时生效} @ mediascreenand(min -width:481 px)和(max -width:720px){//在浏览器屏幕大于480 px小于720 px时生效} @ mediascreenand(min -width:721 px)和(max -width:1079 px){//此代码好了，这差不多就是有反应和无反应的区别了。只要你懂html+css，相信你很快就能掌握。感觉不简单吗？

3.知道了关键点，我们就可以开始制作响应式静态页面了。然后把静态页面放在wordpress相关函数和循环上。当你制作完html静态页面后，可以参考《WordPress主题开发制作常用函数Function:openue.com/post/597"制作模板》。

需要注意的事项

css在设计过程中要尽量避免使用固定的宽度和高度，改用百分比，字体用rem代替px。