「自学哈网」WordPress网站如何实现响应式?
也想出现在这里?
联系我们吧
WordPress网站如何实现响应式?这是站长使用WordPress程序都会研究的,接下来我们一起了解一下。
工具/原料
HTML5
CSS3
现代浏览器,如:Chrome、Firefox、Edge等
方法/步骤
1.简单的说就是,在网页头部( )之间加入以下查询代码:
<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时,此代码块生效
}
其中的范围可以根据实际情况自己修改。OK,响应式与非响应式差不多就是这样的区别了,只要您懂得html+css,相信您很快就会掌握的,是不是感觉很简单呢?
3.了解了关键点,我们就可以动手制作响应式静态页面了。然后把静态页面套上wordpress相关功能函数和循环即可。
注意事项
在设计过程中,css请尽量避免使用固定的宽高,多用百分比来代替,字体多用rem来代替px。
以上就是WordPress网站如何实现响应式的详细内容,更多请关注主题盒子
本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!
自学哈网 » 「自学哈网」WordPress网站如何实现响应式?
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!
自学哈网 » 「自学哈网」WordPress网站如何实现响应式?
也想出现在这里?
联系我们吧