站长资讯网 建站资讯 实现Google Blogger的自适应设计

实现Google Blogger的自适应设计

目前的网站大多数都支持手机访问,使用较多的技术是自适应设计,Google Blogger做为一个年代很久的建站平台,对自适应的支持并不是太好,这里就介绍一下如何修改模版使得Google Blogger能够支持自适应设计。  方法一:使用Go

  目前的网站大多数都支持手机访问,使用较多的技术是自适应设计,Google Blogger做为一个年代很久的建站平台,对自适应的支持并不是太好,这里就介绍一下如何修改模版使得Google Blogger能够支持自适应设计。

  方法一:使用Google Blogger自适应模版

  这种方法是最简单的,Google Blogger曾经推出了四款自适应模版:Contempo、Soho、Emporio、知名,我们只要使用这四款模版即可支持自适应。不过,这四款模版可能并非人人喜欢,如果想用其他模版的话,就要进行手动修改。

  方法二:自定义修改Google Blogger模版

  对于老的Google Blogger模版,通常只能使用这种方法。

  进入Blogger的后台,点选左边功能中的“主题背景”,再点页面里的“修改HTML”。

  在HTML头部增加如下一行代码。

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

  搜索HTML,寻找width关键字,将使用绝对宽度的样式名找到。

  搜索HTML,寻找padding-right,padding-left关键字,将使用这个的样式名找到。

  Blogger后台点左侧“布局”,在底部添加“HTML/JavaScript”小工具。在博客中添加支持自适应的样式代码。

  不同的Blogger模版,样式名略有一些不同,下面是一段示例代码。

<style type="text/css">
@media screen and (max-width:768px) {
body {min-width: 100%;width: 100%;}
.content-outer, .content-fauxcolumn-outer, .region-inner {min-width: 100%;max-width: 100%;width: 100%;}
.main-inner .columns {padding-left: 0;padding-right: 0;}
.main-cap-top .cap-left {display:none;}
.column-right-outer {width: 100%;}
#layout .content-outer {width: 100%;}
.column-right-outer {display:none;}
.column-right-inner {display:none;}
.footer-outer {display:none;}
}
</style>

实现Google Blogger的自适应设计

站长资讯网(www.xxzzgs.com)提供丰富的站长资讯,业界新闻,SEO优化,建站教程,服务器相关资讯,研究数据等互联网资讯,与广大中国站长共同成长

本文来自网络,不代表站长资讯网立场,转载请注明出处:https://www.xxzzgs.com/4054.html

作者: 小编

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: [email protected]

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部