Question

使用名为Simple的默认Blogger模板。那是因为让我编辑更多模板。但响应式设计很差。只有在移动小屏幕上才能轻松阅读文字。我尝试添加媒体查询，但我没有CSS经验。下面是您尝试应用的代码，但未成功。

修改

我们成功添加了一些效果很好的代码。我需要你的帮助来改进我已发布的代码，还需要添加侧边栏来调整或不显示。

对于侧边栏，课程是：fauxcolumn。

我的模板代码在这里：http://hostcode.sourceforge.net/view/3075

＆＃13;

/**************************************************************************/
/*********************RESPONSIVE MEDIA-QUERIES*****************************/
/**************************************************************************/
 
/* Laptops and Desktops */
@media (min-width : 1025px) and (max-width : 1280px) {
/* The following css will be rendered if device width is less than 1280px */
 
}
 
/* Tablets (Landscape) */
@media (min-width : 769px) and (max-width : 1024px) {
/* The following css will be rendered if device width is less than 1024px */
 
body {
   position: relative;
  aling:center;
  margin: 0 0px 0 -25% !important;
  width: auto;
  text-align: left;
  padding-right: 0px;
 
}
 
.post-body {
position: relative;
  margin: 0 0px 0 0px !important;
  width: 75%;
  text-align: left;
  padding-left: 0px;
 
  display: -webkit-flex; /* Safari */
   -webkit-align-items: center; /* Safari 7.0+ */
   display: flex;
}
 
}
 
/* Tablets (Portrait) */
@media (min-width : 641px) and (max-width : 768px) {
/* The following css will be rendered if device width is less than 768px */
body {
   position: relative;
  aling:center;
  margin: 0 0px 0 -35% !important;
  width: auto;
  text-align: left;
  padding-left: 0px;
 
}
 
.post-body {
position: relative;
  margin: 0 0px 0 25px !important;
  width: 60%;
  text-align: left;
  padding-left: 0px;
 
}
}
 
/* iPhones */
@media (min-width : 481px) and (max-width : 640px) {
/* The following css will be rendered if device width is less than 640xpx */
body {
   position: relative;
  aling:center;
  margin: 0 0px 0 -300px !important;
  width: auto;
  text-align: left;
  padding-left: 0px;
 
}
 
.post-body {
position: relative;
  margin: 0 200px 0 0px !important;
  width: 55%;
  text-align: left;
  padding-left: 0px;
 
}
}
 
/* Mobiles */
@media only screen and (max-width : 480px) {
/* The following css will be rendered if device width is less than 480px */
 
}
 
/* Small Mobiles */
@media only screen and (max-width : 320px) {
/* The following css will be rendered if device width is less than 320px */
 
}
 
/**************************************************************************/
/*****************************END RESPONSIVE*******************************/
/**************************************************************************/

＆＃13;

非常感谢您的帮助！

Answer 1

Blogger有一个响应式模板，名为＆＃34; Contempo＆＃34;已有媒体查询。你可能想尝试一下。我在旅行博客中使用它。搜索引擎优化被打破（就像在大多数博客模板中一样），但我也解决了这些问题，你可以从我的GitHub获得修复（对不起，没有链接，你必须自己挖掘它们作为一些＆＃34;专家＆＃34;这里正在编辑删除所有链接的帖子。）

响应式@ media-queries设置模板Blogger

1 个答案: