使用css和html的響應式設計

我正在爲桌面和移動設備構建響應式表單設計。我寫了一個以下的代碼，它工作正常，但它產生的問題，當我調整窗口的大小，如移動屏幕寬度左右邊距空間大小。我希望儘量減少我嘗試了很多左，右頁邊距的空間，但失敗可以有一個人幫助我，請使用css和html的響應式設計

.main_container { 
 
    position: relative; 
 
    width: 100%; 
 
    border-top: 2px solid #e4e4e4; 
 
    border-bottom: 2px solid #e4e4e4; 
 
    overflow: hidden; 
 
} 
 

 
.main_container:after { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 100px 100px 0 100px; 
 
    border-color: #007bff transparent transparent transparent; 
 
} 
 

 
.left_parent { 
 
    float: left; 
 
} 
 

 
.left_child { 
 
    padding-right: 2%; 
 
    padding-left: 0%; 
 
    text-align: center; 
 
} 
 

 
.right_child { 
 
    padding-right: 0%; 
 
    padding-left: 0%; 
 
    text-align: center; 
 
    /*width: 40%;*/ 
 
} 
 

 
.right_parent { 
 
    float: left; 
 
} 
 

 
.left_uppper_text { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 130%; 
 
    text-align: justify; 
 
    margin-right: 3%; 
 
    color: #847979; 
 
} 
 

 
.left_bottom_text { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 81%; 
 
    color: #bbb; 
 
    font-weight: bold; 
 
} 
 

 
.main_child { 
 
    margin: auto; 
 
    padding: 0% 0% 0% 27%; 
 
    overflow: hidden; 
 
    margin: auto; 
 
    width: 50%; 
 
    /* border: 3px solid green; */ 
 
    padding: 10px; 
 
} 
 

 
.input_email { 
 
    width: 67%; 
 
    padding: 3% 17px; 
 
    box-sizing: border-box; 
 
    margin: 8px 0; 
 
} 
 

 
.input_button { 
 
    max-width: 190px; 
 
    min-width: 84px; 
 
    padding: 3% 20px; 
 
    box-sizing: border-box; 
 
    margin: 8px 0; 
 
    background-color: rgba(245, 0, 83, 0.73); 
 
    color: white; 
 
    border: none; 
 
    border-top: 2px solid rgba(245, 0, 83, 0.73); 
 
    border-bottom: 2px solid rgba(245, 0, 83, 0.73); 
 
}

<div class="main_container"> 
 

 
    <div class="main_child"> 
 

 
    <div class="left_parent"> 
 

 
     <div class="left_child"> 
 
     <span class="left_uppper_text"> Join over 20,2000 blog subscriber </span> <br> 
 
     <span class="left_bottom_text"> We guarantee 100% customer satisfaction</span> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="right_parent"> 
 

 
     <div class="right_child"> 
 
     <input type="text" class="input_email"> 
 
     <button class="input_button">Subscribe</button> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
</div>

來源

2017-03-07 Darshan Jadiye

轉換爲代碼段，你能更好地解釋你想達到什麼目的？ –

爲您希望減少邊距的屏幕大小添加媒體查詢。當屏幕大小（或更小）時，邊距會改變。爲此，只需在底部聲明您的媒體查詢，然後重新定義元素的邊距。 – Falk

謝謝@Falk，但沒有關於媒體查詢的知識你能幫助我嗎？ –

所以，你可以在使用@media查詢任何屏幕大小操控風格。你的情況可能是這個樣子：

@media (max-width: 768px /* Mobile size */) { 
    /* Element you want to style at this screen size */ 
    .element { 
     margin: 5px; /* Or whatever style you want */ 
    } 
}

你可以閱讀更多關於@media查詢這裏：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

來源

2017-03-07 20:03:45

非常感謝你@H。艾倫它的作品:) –

沒問題！祝你的項目好運。 –

使用css和html的響應式設計

回答

相關問題