首页 > 电脑专区 > CMS教程 > 帝国cms >

怎样制作WordPress响应式主题/模板

来源:互联网 2023-03-15 22:25:07 版权归原作者所有,如有侵权,请联系我们

这个年代,没有用WordPress做过网站的根本不敢说自己做过网站。WordPress是什么?WordPress是世界大名鼎鼎的网站内容管理系统(或者说博客/Blog系统),简称WP。据相关调查显示,2015年WordPress的市场份额全球高达48%,蝉联全球开源web网站系统冠军。并且还在快速的增长中…综观国内开源的CMS,现在真正存活,保持更新的真心没有几家了。曾经叱咤风云的动易、dedecms、phpcms、帝国cms、phpwind、discuz等等,尚能饭否?AHa办公区 - 实用经验教程分享!

怎样制作WordPress响应式主题/模板?AHa办公区 - 实用经验教程分享!

工具/原料

HTML5CSS3现代浏览器,如:Chrome、Firefox、Edge等

方法/步骤

1

简单的说就是,在网页头部(<head> </head>)之间加入以下查询代码:AHa办公区 - 实用经验教程分享!

AHa办公区 - 实用经验教程分享!

<meta name="viewport" content="width=device-width, initial-scale=1.0" />AHa办公区 - 实用经验教程分享!

2

然后在CSS文件中,加入媒介查询元素,如:AHa办公区 - 实用经验教程分享!

AHa办公区 - 实用经验教程分享!

@media screen and (max-width:480px) {AHa办公区 - 实用经验教程分享!

//当浏览器屏幕小于480px时,此代码块生效AHa办公区 - 实用经验教程分享!

}AHa办公区 - 实用经验教程分享!

AHa办公区 - 实用经验教程分享!

@media screen and (min-width:481px) and (max-width:720px) {AHa办公区 - 实用经验教程分享!

//当浏览器屏幕大于480px小于720px时,此代码块生效AHa办公区 - 实用经验教程分享!

}AHa办公区 - 实用经验教程分享!

AHa办公区 - 实用经验教程分享!

@media screen and (min-width:721px) and (max-width:1079px) {AHa办公区 - 实用经验教程分享!

//当浏览器屏幕大于721px小于1079px时,此代码块生效畜召冷AHa办公区 - 实用经验教程分享!

}AHa办公区 - 实用经验教程分享!

AHa办公区 - 实用经验教程分享!

其中的范围可以根据实际情况自己修改。OK,响应式与非响应式差不多就是这样的区别了,只要您懂得html css,相信您很快就会掌握的,是不是感觉很简单呢?AHa办公区 - 实用经验教程分享!

3

了解了关键点,我们就可以动手制作响应式静态页面了。然后把静态页面套上wordpress相关功愁吩能函数和循环即可。当您制作好html静态页面,您可以参考《WordPress主题开发制作常用的function函数:openue.com/post/597》进行模沫贪板制作了。AHa办公区 - 实用经验教程分享!

注意事项

在设计过程中,css请尽量避免使用固定的宽高,多用百分比来代替,字体多用rem来代替px。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!AHa办公区 - 实用经验教程分享!


标签: WORDPRESS

办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号