如何使用HTML、CSS制作帶有移動應用UI設計的回應式網站-有解無憂

我正在嘗試使用 HTML 和 CSS 使用移動應用程式 UI/UX 構建一些網站..

像一個真正的網站，但用戶界面看起來像一個移動應用程式..

如果我們在筆記本電腦瀏覽器上訪問網站，UI 的寬度將與移動螢屏上的寬度相同.. 所以我將寬度設定為 480px

到目前為止，我是這樣做的……甚至我的代碼也有點亂，但是當我在筆記本電腦瀏覽器上打開它時，它給了我所需的東西。

但問題是當我在移動設備上打開網站時，它的寬度和高度不會根據移動設備螢屏而改變..

當我做了一些研究時，我試圖添加一些我在谷歌上找到的 CSS，但它沒有給我我想要的東西..

這是我的 HTML 腳本和 CSS .. 很抱歉，如果它看起來很亂。

因為我還在前端學習，我希望有人可以幫助我并與我分享..

如果我的解釋不是很清楚并且無法理解，請告訴我，以便我可以通過一些我正在嘗試構建的網路示例添加更多解釋

body{
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    background-color: #dee2e6a1!important;
}
section{
    min-height: 100px;
    max-width: 480px;
    min-width: 380px;
    background: white;
}
header{
    background: #e1ecfb;
    padding: 15px;
    padding-top: 30px;
    border-left: 2px solid #7fa1d166;
    border-right: 2px solid #7fa1d166;
}
.produk_list{
    -background: white;
}
.footer{
    position: fixed;
    bottom:0;
    max-width:480px;
    min-width:480px;
    max-height:60px;   /* Height of the footer */
    background:#6cf;
    font-size: 11px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-color: #e1ecfb;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 2px solid #7fa1d166;
}
.mundur_row{
    font-size: 20px;
    padding-bottom:10px ;
    padding-top:10px ;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #e1ecfb;
    border: 2px solid #7fa1d166;
}
h3{
    text-align: center;
    font-size: 30px;
    margin: 0;
    padding-top: 10px;
}
a{
    text-decoration: none;
}
p{
    text-align: center;
    color: #b2bec3;
    padding: 0 8px;
}
h6{
    font-size: 26px;
    text-align: center;
    color: #222f3e;
    margin: 0;
}
      div {
    text-align: center;
}
input{  
    border: 0;
    width: 2%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input:disabled{
    background-color:white;
}
.b-dark {
    --bs-bg-opacity: 1;
    background-color: #e1ecfb !important;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://localhost/Ordering-System/assets/css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
    <title>Document</title>
</head>
<style>
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
.buttonn {
  transition-duration: 0.4s;
  -color: white!important;
}

.buttonn:hover {
  background-color: #7fa1d1;
  color: white!important;
}

</style>
<body>
    <section>
        <div class="d-flex flex-row sticky-top mundur_row" style="padding-bottom: 25px;">
        </div>      
        <div class="produk_list">            
<br>
        <br>
        <center style="font-size: xx-large;">Some Large Text </center>
        <br>
        <br>
        <br>
        <br>

            <div class="container-fluid" style="padding-bottom:50px;">
                <div class="row data_produk" id="data_produk" style="text-align: center;min-width:480px;">
                    <form>
 <div class="card" style="border: 0;">
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 1</button>
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 2</button>
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 3</button>
                                                                <br>
        <br>
        <br>
        <br>
       </div>
       </form>
       </div>
       </div>
       </div>
       <div class="footer" style="height: 60px;">
           
       </div>
</section>
</body>
</html>

uj5u.com熱心網友回復：

當您設定一些元素 min-width 時，這對于回應式設計來說不是一個好習慣。請更改您的代碼如下。

section{
    ...
    min-width: 380px;
    ...
}

到

section{
    ...
    width: 100%;
    ...
}

和

<div class="row data_produk" id="data_produk" style="text-align: center;min-width:480px;">

到

<div class="row data_produk" id="data_produk" style="text-align: center;width:100%;">

body{
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    background-color: #dee2e6a1!important;
}
section{
    min-height: 100px;
    max-width: 480px;
    width: 100%;
    background: white;
}
header{
    background: #e1ecfb;
    padding: 15px;
    padding-top: 30px;
    border-left: 2px solid #7fa1d166;
    border-right: 2px solid #7fa1d166;
}
.produk_list{
    -background: white;
}
.footer{
    position: fixed;
    bottom:0;
    max-width:480px;
    min-width:480px;
    max-height:60px;   /* Height of the footer */
    background:#6cf;
    font-size: 11px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-color: #e1ecfb;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 2px solid #7fa1d166;
}
.mundur_row{
    font-size: 20px;
    padding-bottom:10px ;
    padding-top:10px ;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #e1ecfb;
    border: 2px solid #7fa1d166;
}
h3{
    text-align: center;
    font-size: 30px;
    margin: 0;
    padding-top: 10px;
}
a{
    text-decoration: none;
}
p{
    text-align: center;
    color: #b2bec3;
    padding: 0 8px;
}
h6{
    font-size: 26px;
    text-align: center;
    color: #222f3e;
    margin: 0;
}
      div {
    text-align: center;
}
input{  
    border: 0;
    width: 2%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input:disabled{
    background-color:white;
}
.b-dark {
    --bs-bg-opacity: 1;
    background-color: #e1ecfb !important;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://localhost/Ordering-System/assets/css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
    <title>Document</title>
</head>
<style>
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
.buttonn {
  transition-duration: 0.4s;
  -color: white!important;
}

.buttonn:hover {
  background-color: #7fa1d1;
  color: white!important;
}

</style>
<body>
    <section>
        <div class="d-flex flex-row sticky-top mundur_row" style="padding-bottom: 25px;">
        </div>      
        <div class="produk_list">            
<br>
        <br>
        <center style="font-size: xx-large;">Some Large Text </center>
        <br>
        <br>
        <br>
        <br>

            <div class="container-fluid" style="padding-bottom:50px;">
                <div class="row data_produk" id="data_produk" style="text-align: center;width:100%;margin: 0 auto">
                    <form>
 <div class="card" style="border: 0;">
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 1</button>
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 2</button>
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 3</button>
                                                                <br>
        <br>
        <br>
        <br>
       </div>
       </form>
       </div>
       </div>
       </div>
       <div class="footer" style="height: 60px;">
           
       </div>
</section>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/369706.html

標籤：html css 用户界面响应式设计前端

上一篇：如何在每一層和時代獲得權重然后保存在檔案中

下一篇：如何向網格窗格添加邊