Css 模板博主的响应式@media查询设置

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

编辑：

我们已经成功地添加了一些运行良好的代码。我需要你的帮助来改进我已经发布的代码，但也要添加边栏来调整或可能不显示

对于侧边栏，类是：fauxcolumn

我的模板代码如下：

/**************************************************************************/
/*********************回应性媒体查询*****************************/
/**************************************************************************/
/*笔记本电脑和台式电脑*/
@介质（最小宽度：1025px）和（最大宽度：1280px）{
/*如果设备宽度小于1280px，将呈现以下css*/
}
/*平板电脑（景观）*/
@介质（最小宽度：769px）和（最大宽度：1024px）{
/*如果设备宽度小于1024px，将呈现以下css*/
身体{
位置：相对位置；
阿林：中心；
利润率：0-25%！重要；
宽度：自动；
文本对齐：左对齐；
右边填充：0px；
}
·邮政机构{
位置：相对位置；
边距：0 0px 0 0px！重要；
宽度：75%；
文本对齐：左对齐；
左侧填充：0px；
显示：-webkit flex；/*Safari*/
-webkit对齐项目：居中；/*Safari 7.0+*/
显示器：flex；
}
}
/*平板电脑（肖像）*/
@介质（最小宽度：641px）和（最大宽度：768px）{
/*如果设备宽度小于768px，将呈现以下css*/
身体{
位置：相对位置；
阿林：中心；
利润率：0-35%！重要；
宽度：自动；
文本对齐：左对齐；
左侧填充：0px；
}
·邮政机构{
位置：相对位置；
利润率：0.0px 0.25px！重要；
宽度：60%；
文本对齐：左对齐；
左侧填充：0px；
}
}
/*iPhone*/
@介质（最小宽度：481px）和（最大宽度：640px）{
/*如果设备宽度小于640xpx，将呈现以下css*/
身体{
位置：相对位置；
阿林：中心；
利润率：0.0px 0-300px！重要；
宽度：自动；
文本对齐：左对齐；
左侧填充：0px；
}
·邮政机构{
位置：相对位置；
余量：0 200px 0 0px！重要；
宽度：55%；
文本对齐：左对齐；
左侧填充：0px；
}
}
/*手机*/
@仅介质屏幕和（最大宽度：480px）{
/*如果设备宽度小于480px，将呈现以下css*/
}
/*小型手机*/
@仅介质屏幕和（最大宽度：320px）{
/*如果设备宽度小于320px，将呈现以下css*/
}
/**************************************************************************/
/*****************************端响应*******************************/
/**************************************************************************/

Blogger有一个名为“Contempo”的响应模板，该模板中已有媒体查询。你可能想试试看。我正在我的旅游博客中使用它。SEO被破坏了（就像大多数博客模板一样），但我也修复了这些问题，你可以从我的GitHub获得修复（对不起，没有链接，你必须自己挖掘出来，因为这里的一些“专家”正在编辑删除所有链接的帖子）