使我的定製tumblr移動友好

-1

我試圖讓我的tumblr移動友好。就像我在移動網站上訪問網站時一樣，它的外觀和行爲與主要網站相同，但體積較小。目前它的方式太大了。我曾嘗試使@css代碼進出.css。我還增加了：使我的定製tumblr移動友好

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

（有沒有運氣。）

我認爲我特地爲我用它，我需要認真的幫助到底。我不想花錢購買每月網站只是爲了轉換它，因爲我敢肯定有一個出路（但我還沒有找到它）我的編碼技巧是相當新的（所以請分解它），但我是一個快速學習;）

網站：www.wordlessmedia.com

來源

2014-10-31 rose

根據網站設計的方式，使其移動友好可能是一個挑戰 - Bootstraps框架使其變得簡單，但轉換爲自舉可能是一個挑戰。 – tymeJV 2014-10-31 15:33:01

謝謝。我看着bootstrap，並從字面上不知道從哪裏開始：它只是給了我一堆文件。該網站是剛剛定製的原始翻滾主題。我認爲也許我放置了一個錯誤的代碼：s – rose 2014-10-31 15:45:07

'width = device-width'真的很有用，但是你應該使用與它成比例的css。標準的移動屏幕寬度爲〜320px（iPhone網絡視圖標準），但您的輪播是1000px，因此它不適合屏幕。你可以通過使用'width = 1000'等來破解寬度，但它不適用於每個移動設備。 – nepeo 2014-10-31 16:04:43

嘗試尋找到bootstrap CSS框架，這是非常容易上手，並且設計時考慮到智能手機/平板電腦（+看起來驚人的工作）。

來源

2014-10-31 15:31:19 Paradoxis

謝謝。我看着bootstrap，並從字面上不知道從哪裏開始：它只是給了我一堆文件。該網站是剛剛定製的原創tumblr主題。我想也許我放置了一個錯誤的代碼：s - – rose 2014-10-31 15:49:16

讓Tumblr博客在移動設備上表現出色，遵循與正規HTML頁面相同的規則; HTML和CSS都需要編輯。

添加<meta name="viewport" content="width=device-width" />或<meta name="viewport" content="width=device-width; initial-scale=1.0">你的HTML模板
添加與媒體查詢CSS;這取決於你的戰略，你可以使用流體佈局或斷點

根據經驗，一個簡單的響應CSS的策略規則：

避免設置絕對寬度（例如使用%代替px PR em。）
如果您必須設置絕對寬度，請使用媒體查詢更改此寬度以適應不同的顯示寬度
如果您有多個相鄰元素，請考慮將它們放在單個列中小屏幕。
縮放圖像以適合其各自容器寬度的簡單方法是img, video {max-width:100%};如果沒有足夠的空間，這將縮小圖像

請參閱http://blog.3960.org/以獲取響應式Tumblr博客的實時示例（我不得不承認這是我的博客:)）。在http://cdn.3960.org/_style/style.css上有一個小樣式表，它通過設置斷點來定義一些流體和其他事物。

來源

2014-10-31 16:14:14 fboes

太好了！我現在要嘗試一下。在令人興奮的樣式表中，有一些媒體查詢（但他們不工作），我應該刪除它們並添加我自己的移動CSS或shalli留下令人興奮的樣式表，並安排我自己的移動CSS（它會覆蓋激動人心的？）Ansive將放在我的html頭部後面之後。這可以嗎？ – rose 2014-11-03 08:48:39

只要在''中，''''''''''''''''視口的位置取決於您。「@ media」規則是可選的，只有當您想要改變某些分辨率的頁面行爲時才需要。 – fboes 2014-11-03 10:19:43

使我的定製tumblr移動友好

回答

相關問題