使我的定制tumblr移动友好

Question

我试图让我的tumblr移动友好。就像我在移动设备上访问网站时一样，它的外观和行为与主要网站相同，但随后变小。 目前它的方式太大了。我试过在.css中输入和输出@media代码。 我还添加了：

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

（没有运气。）

我认为我已经结束了它，我非常需要帮助。 我不想花钱购买月度网站只是为了转换它，因为我确定有一条出路（但我还没有发现它） 我的编码技巧很新（所以请分解）但我快速学习;）

网站：www.wordlessmedia.com

Answer 1

让Tumblr博客在移动设备上表现得很好，遵循与normale HTML页面相同的规则;必须编辑HTML和CSS。

1. 将<meta name="viewport" content="width=device-width" />或<meta name="viewport" content="width=device-width; initial-scale=1.0">添加到您的HTML模板
2. 添加带媒体查询的CSS;根据您的策略，您可以使用流体布局或断点

作为简单的响应式CSS策略的经验法则：

1. 避免设置绝对宽度（例如，使用%代替px pr em。）
2. 如果必须设置绝对宽度，请使用媒体查询更改此宽度以适应不同的显示宽度
3. 如果您有多个元素彼此相邻，请考虑将它们放在一个小屏幕列中。
4. 缩放图像以适应其各自容器宽度的简单方法是img, video {max-width:100%};如果空间不足，这将缩小图像

有关响应式Tumblr博客的实际示例，请参阅http://blog.3960.org/（我必须承认这是我的博客:)）。在http://cdn.3960.org/_style/style.css处有一个小样式表，它通过设置断点定义了一些流畅的东西，以及其他东西。

Answer 2

尝试查看bootstrap css框架，它非常容易上手，专为智能手机/平板电脑而设计（+看起来很棒）。