当前位置： 文江博客话题详情

我用 html、css、js 创建的计算器存在不适合任何屏幕尺寸的问题

发布于 2025-01-12 00:46:14 字数 6548 浏览 0 评论 0原文

所以我使用 html,css,js 创建了一个计算器。在电脑/大屏幕尺寸下，它看起来很棒。但在手机/平板电脑等较小的屏幕尺寸中，它会完全切断并且不会调整到尺寸。以下是示例图片：

1080x2280 屏幕尺寸图片

720x1280 屏幕尺寸图片，

如您所见，它会剪切掉计算器上的文本和侧面720x1280

，但我希望它不要被切断。我做了很多搜索但找不到任何帮助。如果你帮助我，我会很高兴。

这是代码。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Smooth Calculator</title>
</head>
<body>
    <div class="container">
        <div class="calculator dark">
            <div class="theme-toggler active">
                <i class="toggler-icon"></i>
            </div>
            <div class="display-screen">
                <div id="display"></div>
            </div>
            <div class="buttons">
                <table>
                    <tr>
                        <td><button class="btn-operator" id="clear">C</button></td>
                        <td><button class="btn-operator" id="/">&divide;</button></td>
                        <td><button class="btn-operator" id="*">&times;</button></td>
                        <td><button class="btn-operator" id="backspace">&laquo;</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="7">7</button></td>
                        <td><button class="btn-number" id="8">8</button></td>
                        <td><button class="btn-number" id="9">9</button></td>
                        <td><button class="btn-operator" id="-">&minus;</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="4">4</button></td>
                        <td><button class="btn-number" id="5">5</button></td>
                        <td><button class="btn-number" id="6">6</button></td>
                        <td><button class="btn-operator" id="&plus;">+</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="1">1</button></td>
                        <td><button class="btn-number" id="2">2</button></td>
                        <td><button class="btn-number" id="3">3</button></td>
                        <td rowspan="2"><button class="btn-equal" id="equal">&equals;</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-operator" id="(">&lpar;</button></td>
                        <td><button class="btn-number" id="0">0</button></td>
                        <td><button class="btn-operator" id=")">&rpar;</button></td>
                    </tr>
                </table>
            </div>
        </div>
        <p>&copy; 2022 | AK PR</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css

@font-face {
    font-family: 'Product-Sans';
    src: url('font.ttf');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: Product-Sans;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 0;
    transition: all 0.5s ease;
}

a {
    text-decoration: none;
    color: #fff;
}

body {
    background-image: linear-gradient( to bottom right, rgba(79,51,176,1.0),rgba(210,53,165));
}

.container {
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
}

.calculator {
    position: relative;
    height: auto;
    width: auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 30px #000;
}

.theme-toggler {
    position: absolute;
    top: 30px;
    right: 30px;
    color: #fff;
    cursor: pointer;
    z-index: 1;
}

.theme-toggler.active {
    color: #333;
}

.theme-toggler.active::before {
    background-color: #fff;
}

.theme-toggler::before {
    content: '';
    height: 30px;
    width: 30px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #333;
    z-index: -1;
}

#display {
    margin: 0 10px;
    height: 150px;
    width: auto;
    max-width: 270px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 30px;
    margin-bottom: 20px;
    overflow-x: scroll;
  }

#display::-webkit-scrollbar {
    display: block;
    height: 3px;
}

button {
    height: 60px;
    width: 60px;
    border: 0;
    border-radius: 30px;
    margin: 5px;
    font-size: 20px;
    cursor: pointer;
    transition: all 200ms ease;
}

button:hover {
    transform: scale(1.1);
}

button#equal {
    height: 130px;
}

/* light theme */

.calculator {
    background-color: #fff;
}

.calculator #display {
    color: #0a1e23;
}

.calculator button#clear {
    background-color: #ffd5d8;
    color: #fc4552;
}

.calculator button.btn-number {
    background-color: #c3eaff;
    color: #000000;
}

.calculator button.btn-operator {
    background-color: #ffd0fb;
    color: #f967f3;
  }
  
  .calculator button.btn-equal {
    background-color: #adf9e7;
    color: #000;
  }

  /* dark theme */

  .calculator.dark {
    background-color: #071115;
  }

  .calculator.dark #display {
    color: #f8fafb;
  }

  .calculator.dark button#clear {
    background-color: #2d191e;
    color: #bd3740;
  }

  .calculator.dark button.btn-number {
    background-color: #1b2f38;
    color: #f8fafb;
  }

  .calculator.dark button.btn-operator {
    background-color: #2e1f39;
    color: #aa00a4;
  }
  
  .calculator.dark button.btn-equal {
    background-color: #223323;
    color: #ffffff;
  }
原文

so I created a calculator using html,css,js . In pc/big screen size it looks great. But in smaller screen size like phone/tablet it completely cuts off and doesn't adjust to the size. Here is example pictures:

1080x2280 screen size picture

720x1280 screen size picture

as you can see it cuts off the text and sides of the calculator on the 720x1280

but I want it to not cut off. I did a lot of searching but couldn't get any help. I would be happy if you helped me.

here is the code.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Smooth Calculator</title>
</head>
<body>
    <div class="container">
        <div class="calculator dark">
            <div class="theme-toggler active">
                <i class="toggler-icon"></i>
            </div>
            <div class="display-screen">
                <div id="display"></div>
            </div>
            <div class="buttons">
                <table>
                    <tr>
                        <td><button class="btn-operator" id="clear">C</button></td>
                        <td><button class="btn-operator" id="/">÷</button></td>
                        <td><button class="btn-operator" id="*">×</button></td>
                        <td><button class="btn-operator" id="backspace">«</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="7">7</button></td>
                        <td><button class="btn-number" id="8">8</button></td>
                        <td><button class="btn-number" id="9">9</button></td>
                        <td><button class="btn-operator" id="-">−</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="4">4</button></td>
                        <td><button class="btn-number" id="5">5</button></td>
                        <td><button class="btn-number" id="6">6</button></td>
                        <td><button class="btn-operator" id="+">+</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="1">1</button></td>
                        <td><button class="btn-number" id="2">2</button></td>
                        <td><button class="btn-number" id="3">3</button></td>
                        <td rowspan="2"><button class="btn-equal" id="equal">=</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-operator" id="(">(</button></td>
                        <td><button class="btn-number" id="0">0</button></td>
                        <td><button class="btn-operator" id=")">)</button></td>
                    </tr>
                </table>
            </div>
        </div>
        <p>© 2022 | AK PR</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css

@font-face {
    font-family: 'Product-Sans';
    src: url('font.ttf');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: Product-Sans;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 0;
    transition: all 0.5s ease;
}

a {
    text-decoration: none;
    color: #fff;
}

body {
    background-image: linear-gradient( to bottom right, rgba(79,51,176,1.0),rgba(210,53,165));
}

.container {
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
}

.calculator {
    position: relative;
    height: auto;
    width: auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 30px #000;
}

.theme-toggler {
    position: absolute;
    top: 30px;
    right: 30px;
    color: #fff;
    cursor: pointer;
    z-index: 1;
}

.theme-toggler.active {
    color: #333;
}

.theme-toggler.active::before {
    background-color: #fff;
}

.theme-toggler::before {
    content: '';
    height: 30px;
    width: 30px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #333;
    z-index: -1;
}

#display {
    margin: 0 10px;
    height: 150px;
    width: auto;
    max-width: 270px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 30px;
    margin-bottom: 20px;
    overflow-x: scroll;
  }

#display::-webkit-scrollbar {
    display: block;
    height: 3px;
}

button {
    height: 60px;
    width: 60px;
    border: 0;
    border-radius: 30px;
    margin: 5px;
    font-size: 20px;
    cursor: pointer;
    transition: all 200ms ease;
}

button:hover {
    transform: scale(1.1);
}

button#equal {
    height: 130px;
}

/* light theme */

.calculator {
    background-color: #fff;
}

.calculator #display {
    color: #0a1e23;
}

.calculator button#clear {
    background-color: #ffd5d8;
    color: #fc4552;
}

.calculator button.btn-number {
    background-color: #c3eaff;
    color: #000000;
}

.calculator button.btn-operator {
    background-color: #ffd0fb;
    color: #f967f3;
  }
  
  .calculator button.btn-equal {
    background-color: #adf9e7;
    color: #000;
  }

  /* dark theme */

  .calculator.dark {
    background-color: #071115;
  }

  .calculator.dark #display {
    color: #f8fafb;
  }

  .calculator.dark button#clear {
    background-color: #2d191e;
    color: #bd3740;
  }

  .calculator.dark button.btn-number {
    background-color: #1b2f38;
    color: #f8fafb;
  }

  .calculator.dark button.btn-operator {
    background-color: #2e1f39;
    color: #aa00a4;
  }
  
  .calculator.dark button.btn-equal {
    background-color: #223323;
    color: #ffffff;
  }

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

鸢与 2025-01-19 00:46:14

当我浏览您的代码时，没有使您的页面响应的代码。您应该使用媒体查询使其响应您用来访问页面的不同屏幕。浏览响应式网页和媒体查询将帮助您解决此问题

As I went through your code there is no code for making your page responsive .You should use media query to make it responsive for different screens that you use to access your page.Go through about responsive webpages and media query that will help you solve this

回复 原文
野の 2025-01-19 00:46:14

您可以使用 CSS 媒体查询，以便可以针对不同的屏幕分辨率进行设计

You can use CSS media queries so that you can design for different screen resolution

回复 原文
~没有更多了~

关于作者

愿与i

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

紫罗兰の梦幻

文章 0 评论 0

-2134

文章 0 评论 0

liuxuanli

文章 0 评论 0

意中人

文章 0 评论 0

○愚か者の日

文章 0 评论 0

xxhui

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文