33

实现Google Blogger的自适应设计

 4 years ago
source link: https://www.williamlong.info/archives/5765.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

实现Google Blogger的自适应设计

2019-7-14 22:58:53 | 作者: 月光 | 分类: 网站建设 | 评论: 0 | 浏览: 1291

　　目前的网站大多数都支持手机访问，使用较多的技术是自适应设计，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的自适应设计

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK