製作分屏界面響應

-1

我最近開始學習HTML和CSS，並且練習我一直在創建作品集網站。我知道我現在所做的網站並不多，但我有一個關於分屏佈局的問題。製作分屏界面響應

問題是：我如何使這種響應？無論屏幕大小如何，通過響應我的意思是讓雙方的寬度和高度相等。我對響應式設計沒有多少實踐。我知道flexbox，就是這樣。該頁面的兩個部分由flexbox製成。我嘗試將單位從px切換到ems，但似乎沒有可見的效果。

什麼是最好的方式使這種響應？還有什麼是開始學習響應式設計的一些很好的資源？謝謝。

.sideone { 
display: flex; 
justify-content: flex-start; 
background-color: #3B3355; 
width: 900px; 
height: 720%; 
z-index: 2; 
border-right: 45px solid #3B3355; 
flex: auto; 
max-width: 900px; 
min-width: 900px;} 

    .sidetwo { 
display: flex; 
justify-content: flex-end; 
background-image: url(city.jpg); 
filter: blur(3px); 
transform: scale(1.03 ); 
background-size: 175% auto; 
width: 73em; 
height: 720%; 
z-index: 1; 
max-width: 73em; 
min-width: 73em; }

到右邊的圖像只是一個佔位符我有一個喜歡的圖像保存。

來源

2017-07-30 Kuebiko

存在稱爲vw和vh（'視口寬度'和'視口高度'）的新的CSS3度量單位，它們非常適合整頁佈局。用display: inline-block規則串聯這個規則，你要找的效果很容易完成。要開始，我們可以去掉任何與flexbox佈局有關的事情（因爲這是CSS的一個高級部分，所以讓我們先讓事情變得更加簡單）。

所以，1）刪除這些<div>的是不是在需要時（只是div的，而不是裏面的內容）：

<div class="twosidescontainer">...</div> 
<div class="twosides">...</div>

和相應的CSS規則：

.twosidescontainer { ... } 
.twosides { ... }

2）我們希望利用CSS中的高度單位vh，並刪除不需要的樣式：

.sideone { 
    display: inline-block; 
    vertical-align: top; 
    background-color: #3B3355; 
    width: 50%; 
    height: 100vh; 
    //z-index: 2; 
    //border-right: 45px solid #3B3355; 
    //flex: auto; 
    //max-width: 930px; 
    //min-width: 900px; 
    //justify-content: flex-start; 
} 

.sidetwo { 
    display: inline-block; 
    vertical-align: top; 
    background: url(https://www.w3schools.com/w3images/fjords.jpg) no-repeat; 
    background-position: center; 
    background-size: cover; 
    filter: blur(3px); 
    width: 50%; 
    height: 100vh; 
    //transform: scale(1.03); 
    //background-size: 175% auto; 
    //z-index: 1; 
    //max-width: 73em; 
    //min-width: 73em; 
    //justify-content: flex-end; 
}

3）最後，我們要收拾<h1>造型在上半年集中坐下：

h1 { 
    color: #000505; 
    display: block; 
    font-size: 75px; 
    text-align: center; 
    //justify-content: center; 
    //align-items: center; 
    //margin-left: 175px; 
}

正如你可以看到，通過調整窗口都通過的寬度和高度，佈局仍然是一個分裂50/50寬度相同。檢查here爲小提琴。

來源

2017-07-31 11:29:36

我會建議從https://www.codecademy.com/學習HTML或CSS的任何方面。對於初學者來說，這是大多免費的，並且是瞭解你似乎在問什麼的一個很好的資源。然而，在問題的其餘部分，似乎並不清楚你在問什麼。我會建議清理你的代碼，添加一些評論讓你自己知道你在做什麼，看看你是否能找到你錯過的東西。這是編程方法的第一條規則。至於添加響應元素，您的代碼似乎僅限於靜態網站。嘗試在網站的響應方面添加更多可以操縱的元素。

讓頁面響應的一個確定方法是使用另一種語言（如javascript，jquery，php等）進行鏈接，具體取決於您希望項目執行的操作，但這超出了您嘗試學習的內容。

來源

2017-07-30 23:32:57

製作分屏界面響應

回答

相關問題