如何使用移动应用 UI-使用 HTML、CSS 设计响应式网站
how to make a responsive website with mobile app UI-design using HTML,CSS
我正在尝试使用 HTML 和 CSS ..
通过移动应用 UI/UX 构建一些网站
像一个真实的网站，但 UI 看起来像一个移动应用程序..
如果我们在笔记本电脑浏览器上访问该网站，UI 的宽度将与在手机屏幕上一样..所以我将宽度设置为 480px
到目前为止我是这样写的..甚至我的代码有点乱，但当我在笔记本电脑浏览器上打开它时，它给了我我需要的东西。
但问题是当我在手机上打开网站时，它的宽度和高度并没有根据手机屏幕而改变..
我尝试添加一些 CSS 我在 google 上做一些研究时发现的，但它没有给我想要的东西..
这是我的 HTML 脚本和 CSS .. 如果它看起来很乱，请见谅。
因为我还在学习前端，希望有人能帮助我和我分享..
如果我的解释不是很清楚并且无法理解，请告诉我，这样我就可以添加一些关于我正在尝试构建的 Web 示例的更多解释
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>
我正在尝试使用 HTML 和 CSS ..
通过移动应用 UI/UX 构建一些网站像一个真实的网站，但 UI 看起来像一个移动应用程序..
如果我们在笔记本电脑浏览器上访问该网站，UI 的宽度将与在手机屏幕上一样..所以我将宽度设置为 480px
到目前为止我是这样写的..甚至我的代码有点乱，但当我在笔记本电脑浏览器上打开它时，它给了我我需要的东西。
但问题是当我在手机上打开网站时，它的宽度和高度并没有根据手机屏幕而改变..
我尝试添加一些 CSS 我在 google 上做一些研究时发现的，但它没有给我想要的东西..
这是我的 HTML 脚本和 CSS .. 如果它看起来很乱，请见谅。
因为我还在学习前端，希望有人能帮助我和我分享..
如果我的解释不是很清楚并且无法理解，请告诉我，这样我就可以添加一些关于我正在尝试构建的 Web 示例的更多解释
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>