如何使用 HTML,CSS 使用移动应用程序 UI 设计制作响应式网站
[英]how to make a responsive website with mobile app UI-design using HTML,CSS
问题描述
I'm trying to build some website with mobile app UI/UX using HTML and CSS..
我正在尝试使用 HTML 和 CSS 构建一些带有移动应用程序 UI/UX 的网站。
like a real website but the UI looks like a mobile app..像一个真正的网站，但 UI 看起来像一个移动应用程序..
if we access to the website on laptop browser the width of UI gonna be same just like on mobile screen.. so I set the width to 480px如果我们在笔记本电脑浏览器上访问该网站，那么 UI 的宽度将与移动屏幕上的一样......所以我将宽度设置为 480px
so far I make like this.. and even my code is lil bit messy but it gave me just like what I need when I open it on a laptop browser.到目前为止，我是这样的……甚至我的代码也有点乱，但它给了我就像我在笔记本电脑浏览器上打开它时所需要的一样。
but the problem is when I open the website on mobile the width and height it doesn't changed based on the mobile screen..但问题是当我在移动设备上打开网站时，宽度和高度不会根据移动屏幕改变..
I tried to add some CSS I found on google when I did some research but it doesn't give me what I want..我尝试添加一些 CSS 我在做一些研究时在谷歌上找到的，但它并没有给我想要的东西..
and here is my HTML script and CSS.. and sorry if it looks so messy.这是我的 HTML 脚本和 CSS .. 抱歉，如果它看起来很乱。
Because I'm still learning on Front-End and I hope someone can help me and share with me..因为我还在学习前端，希望有人可以帮助我并与我分享..
if my explanation is not really clear and cant be understand please tell me so I can add some more explanation with some web example of what I'm trying to build如果我的解释不是很清楚并且无法理解，请告诉我，以便我可以添加更多解释，并添加一些 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>
1 个解决方案
解决方案1
0 2021-11-29 02:50:45
As you set some element min-width this is not good practice for responsive design.当您设置一些元素最小宽度时，这对于响应式设计来说不是一个好习惯。 Please change your code as below.请更改您的代码如下。
section{
...
min-width: 380px;
...
}
To至
section{
...
width: 100%;
...
}
And和
<div class="row data_produk" id="data_produk" style="text-align: center;min-width:480px;">
To至
<div class="row data_produk" id="data_produk" style="text-align: center;width:100%;">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.