如何爲移動設備設計可擴展的HTML5網站？

我需要一個可擴展的HTML5網站設計。我的想法是在body元素中定義1px的「base」字體大小，並在「em」中定義與此值相對的所有子元素。如何爲移動設備設計可擴展的HTML5網站？

更確切地說：子元素（圖像，div等）的所有大小（寬度，高度，邊距，填充和字體大小）均以「em」爲單位進行定義，因此很容易對整個網站進行縮放只有通過更改「基本」字體大小（在正文中）。

我需要這樣做，因爲不同的移動設備有不同的屏幕尺寸和不同的devicePixelRatio值。因此，如果我通過JavaScript檢測到更大的屏幕尺寸（例如1.2倍大），我可以簡單地設置font-size: 1.2px僅用於body元素，整個網站應該是1.2x更大。

實施例：

<!doctype html> 
<html> 

    <head> 
     <title>foo</title> 

     <style> 
      body{ 
       font-size: 1px; 
       /* If a sceen is 1.2x bigger than this "default" size, then change font-size to 1.2px */ 
      } 

      #myimg{ 
       /* 200em = 200px in this case because body font-size=1px */ 
       width: 200em; 
       height: 200em; 
      } 

      #somediv{ 
       width: 100em; 
       height: 100em; 
       font-size: 20em; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <img id="myimg" src="foo.jpg"> 
      <div id="somediv"> 
       foo 
      </div> 
     </div> 
    </body> 

</html>

唯一的問題是，對具有字體大小的容器中定義（例如22em），也定義了一個新的「基」字體大小爲他們的孩子元素，因此這必須避免。

例風格（絕不能發生！）

#wrapper{ 
    font-size: 3px; 
}

如果以上將被添加這種風格，所有子容器（及其子女）將成爲大3倍（=不是我想要的）。

這是一個可行的解決方案，還是有更好的方法來創建一個完全可擴展的設計？

來源

2012-05-29 Timo

把所有子元素，我認爲你是在談論被稱爲「彈性什麼佈局」。有關於如何正確執行此操作的無盡技巧，並非所有的好建議。這裏有一篇關於固定，流暢和彈性佈局之間差異的體面文章：http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right- one-for-you/ –

-2

我試過我的解決方案描述，它工作得很好。我還注意到，這似乎是一個相當普遍的做法。

，我建議改變的唯一的事情就是用10px的（而不是1像素）的基本字體大小和10

來源

2012-07-04 08:31:06 Timo

問題擁有者接受此爲正確答案，那麼爲什麼是-1？ plz刪除 –

Downvoter謹慎解釋？對我來說，這篇文章正確回答了我的問題 – Timo

如何爲移動設備設計可擴展的HTML5網站？

回答

相關問題