我正在尝试使用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/bootstrap@5.1.1/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>当您设置一些元素最小宽度时，这对于响应式设计来说不是一个好的做法。请按以下方式更改您的代码。
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/bootstrap@5.1.1/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>