HTML結構，屏幕尺寸元素

-1

我想正確地創建以下樣機的HTML結構：HTML結構，屏幕尺寸元素

要求和條件：

一個項目的大小（粉紅色或黑色項目）是設備屏幕的大小。
每個項目代表一個頁面。
它可以是任何設備，如臺式機，平板電腦，智能手機。
只有一個頁面將在時間顯示！
導航，不是我的問題的主題，我只是儘量提供儘可能多的信息，將通過單擊桌面設備上的箭頭並在其他設備上滑動來完成。
將不會有滾動條。
任何頁面的內容可以超出屏幕電流的大小，如果是，它會被打上一個滑塊或輪播功能裏面的內容。
任何頁面都可以包含其他類似於當前結構的結構。

我不確定是否所有的要點都非常重要，以便知道爲當前的樣機創建基本結構。

是否可以使用position: relative創建主要起始元素（粉紅色）以及所有其他元素是position: absolute？也是基於當前屏幕大小的jQuery計算的頁面大小？或者這不需要任何jQuery？（width: 100%和height: 100%只能通過CSS？）

這就是我想這個HTML結構的方式，但我不太確定它是最好的解決方案，所以我認爲這也是一個好主意，可以聽取其他意見。

來源

2017-07-17 Grávuj Miklós Henrich

我只有方向和期望答案相同，但下面的答案似乎是好的，我沒有更好的主意。 –

你的做法是相當接近需要什麼，所有的頁面的div應該是一個需要是相對的容器內，和孩子的應該是絕對的，據我所看到的，一個簡單的標記就足以實現這一點使用圖端口的高度和寬度在CSS，像下面

HTML

<div id="cont"> 
    <div id="pink"></div> 
    <div id="blk1"></div> 
    <div id="blk2"></div> 
    <div id="blk3"></div> 
    <div id="blk4"></div> 
</div>

CSS

#cont{ 
    width: 100vw; 
    height:100vh; 
    position: relative; 
} 

#cont div{ 
    width: 100vw; 
    height:100vh; 
    background: #2c2c2c; 
    margin:20px; 
    position:absolute; 
} 

#pink{ background: #F00 !important; } 
#blk1{ left: -100vw; } 
#blk2{ top: -100vh; } 
#blk3{ bottom: -100vh; } 
#blk4{ right: -100vw; }

這是一個fiddle

來源

2017-07-17 07:38:32

謝謝！我期待着一些方向，但代碼也很有用。 –

高興地幫助:) –

HTML結構，屏幕尺寸元素

回答

相關問題