HTML 相对字体太大

标签 html css

我有个问题。我创建了以下页面:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #DADADA;
    width: 100%;
}

.title {
    display: block;
    text-align: center;
    color: #1D0F73;
    font-size: 22px;
    font-weight: bold;
    padding: 5px;
}

#coinData {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    padding-top: 30px;
}

#coin1Data {
    background-color: #7AAED3;
    width: 100%;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

#coin2Data {
    background-color: #7AD39E;
    width: 100%;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

.coin-candlesticks {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 5px;
    width: 95%;
    margin: auto auto;
    padding-bottom: 15px;
}

.candlestickImage {
    max-width:100%;
    max-height:100%;
    height:auto;
}

.coin-price {
    margin: auto auto;
    padding-bottom: 15px;
    margin: auto auto;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}


#newOrderControl {
    width: max-content;
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    font-size: 14px;
    padding: 0px 10px;
  }
  
  #newOrderInputFields {
    display: grid;
    grid-template-columns: auto auto auto auto;
    row-gap: 5px;
    column-gap: 20px;
    padding-bottom: 20px;
    justify-items: end;
  }

  #newOrderInputFields input {
    width: 160px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
  }
  
  #newOrderButtons {
    align-self: flex-end;
    padding-bottom: 20px;
  }
  
  #newOrderButtons button {
    border-style: solid;
    border-color: black;
    border-width: 2px;
    color: white;
    height: 30px;
    width: auto;
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 10px;
    padding: 0px 5px;
  }
  
  .btnAll {
    background-color: #6DA0ED;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    color: white;
    border-radius: 5px;
  }
  
  #btnTakeProfit {
    background-color: #33AB37;
  }
  
  #btnPlaceOrder {
    background-color: #6DA0ED;
  }
  
  #orderHistory {
    margin-top: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    width: 100%;
}

#orderHistoryContent {
    padding-top: 20px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
    width: 100%;
    font-size: 0.9vw;
    padding: 0px;
    right: 0px;
}

#orderHistoryContent div {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    padding: 2px;
}


.order-history-header {
    font-weight: bold;
}

/* #orderHistoryContent label {
    font-size: calc(0.3em + 1vw)
} */


#agentPortfolio {
    padding-top: 20px;
    display: grid;
    grid-template-columns: min-content auto;
}

#portfolio {
    background-color: #F5F5D3;
    width: 190px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

#portfolioContent {
    font-size: 14px;
    display: grid;
    grid-template-columns: 60% auto;
}

.portfolio-header {
    display: block;
    padding: 1px 0px;
    font-weight: bold;
    padding-left: 5px;
}

.portfolio-value {
    display: block;
    padding: 1px 0px;
    text-align: right;
    padding-right: 5px;
}


#wallet {
    background-color: #D8F1FF;
    width: 700px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

#walletContent {
    font-size: 14px;
    display: block;
}

.wallet-coin {
    display: grid;
    grid-template-columns: 10% 12% 15% 15% 18% 15% 15%;
    padding: 0px 5px;
}

.wallet-number {
    text-align: right;
}

.wallet-header {
    font-weight: bold;
}

#topBar {
    height: 30px;
}

#comboBoxAgent {
    width: 400px;
    height: 100%;
}

#comboBoxCoin1 {
    min-width: 60px;
    height: 100%;
}

#comboBoxCoin2 {
    min-width: 60px;
    height: 100%;
}

#btnToggleAgent {
    float: right;
    height: 100%;
    min-width: 60px;
    width: 70px;
    border-radius: 10px;
    font-size: 18px;
    color: white;
}
<body>

        <div id="topBar">
            <select id="comboBoxAgent"></select>
            <select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()"></select>
            <select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()"></select>
            <button id="btnToggleAgent" onclick="toggleActive()"></button>
        </div>

        <div id="agentPortfolio">
            <div id="portfolio">
                <label class="title">Agent</label>
                <div id="portfolioContent">
                    <div><label class="portfolio-header">Market value:</label></div>
                    <div><label class="portfolio-value" id="marketValue"></label></div>

                    <label class="portfolio-header">Portfolio value:</label>
                    <label class="portfolio-value" id="portfolioValue"></label>

                    <label class="portfolio-header">Total value:</label>
                    <label class="portfolio-value" id="totalValue"></label>

                    <label class="portfolio-header">Overall profit $:</label>
                    <label class="portfolio-value" id="overallProfitUSDT"></label>

                    <label class="portfolio-header">Overall profit %:</label>
                    <label class="portfolio-value" id="overallProfitPerc"></label>
                </div>
            </div>
            <div id="wallet">
                <label class="title">Wallet</label>
                <div id="walletContent">
                    <div class="wallet-coin">
                        <div class="wallet-market wallet-header">
                            <span>Market:</span>
                        </div>
                        <div class="wallet-coin wallet-header">
                            <span>Coin:</span>
                        </div>
                        <div class="wallet-number wallet-header">
                            <span>Quantity:</span>
                        </div>
                        <div class="wallet-number wallet-header">
                            <span>Value:</span>
                        </div>
                        <div class="wallet-number wallet-header">
                            <span>Avg Price:</span>
                        </div>
                        <div class="wallet-number wallet-header">
                            <span>Profit $:</span>
                        </div>
                        <div class="wallet-number wallet-header">
                            <span>Profit %:</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="coinData">
            <div id="coin1Data">
                <label id="coin1Title" class="title"></label>
                <div class="coin-price">
                    <span id="coin1Price"></span>
                </div>
                <div id="coin1Candlesticks" class="coin-candlesticks">
                </div>
            </div>
            <div id="coin2Data">
                <label id="coin2Title" class="title"></label>
                <div class="coin-price">
                    <span id="coin2Price"></span>
                </div>
                <div id="coin2Candlesticks" class="coin-candlesticks">
                </div>
            </div>
        </div>

        <div id="newOrderControl">
            <label class="title">New order</label>
            <div id="newOrderInputFields">
                <div class="inputField">
                <label>Action:</label>
                <select id="txtOrderAction">
                    <option value="">-</option>
                    <option value="Buy">Buy</option>
                    <option value="Sell">Sell</option>
                </select>
                </div>
                <div class="inputField">
                <label>Quantity:</label>
                <input type="text" id="txtOrderQuantity">
                <button class="btnAll" onclick="setAllQuantity()">All</button>
                </div>
                <div class="inputField">
                <label>Target price:</label>
                <input type="text" id="txtOrderTargetPrice">
                </div>
                <div class="inputField">
                <label>Target perc:</label>
                <input type="text" id="txtOrderTargetPerc">
                </div>
                <div class="inputField">
                <label>Coin:</label>
                <select id="txtOrderCoin">
                    <option value="">-</option>
                    <option value="">SPTF</option>
                    <option value="">TLS</option>
                </select>
                </div>
                <div class="inputField">
                <label>Amount:</label>
                <input type="text" id="txtOrderAmount">
                <button class="btnAll" onclick="setAllAmount()">All</button>
                </div>
                <div class="inputField">
                <label>Limit price:</label>
                <input type="text" id="txtOrderLimitPrice">
                </div>
                <div class="inputField">
                <label>Limit perc:</label>
                <input type="text" id="txtOrderLimitPerc">
                </div>
            </div>
            <div id="newOrderButtons">
                <button id="btnTakeProfit">Take profit</button>
                <button id="btnPlaceOrder">Place order</button>
            </div>
        </div>

        <div id="orderHistory">
            <label class="title">Order history</label>
            <div id="orderHistoryContent">
                <div class="order-history-header">
                    <label>Action</label>
                </div>
                <div class="order-history-header">
                    <label>Market</label>
                </div>
                <div class="order-history-header">
                    <label>Coin</label>
                </div>
                <div class="order-history-header">
                    <label>DateTimeEntered</label>
                </div>
                <div class="order-history-header">
                    <label>Quantity</label>
                </div>
                <div class="order-history-header">
                    <label>Amount</label>
                </div>
                <div class="order-history-header">
                    <label>Target price</label>
                </div>
                <div class="order-history-header">
                    <label>Limit price</label>
                </div>
                <div class="order-history-header">
                    <label>Price</label>
                </div>
                <div class="order-history-header">
                    <label>DateTimeExecuted</label>
                </div>
                <div class="order-history-header">
                    <label>Status</label>
                </div>
                <div class="order-history-header">
                    <label>Profit</label>
                </div>
            <div style="background-color: rgb(251, 216, 255);">             <label>Buy</label>         </div>         <div style="background-color: rgb(255, 255, 255);">             <label>USDT</label>         </div>         <div style="background-color: rgb(220, 255, 193);">             <label>BTC</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>2021-05-08 00:00:00</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>999999.00000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.00</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>56723.640000</label>         </div>         <div style="background-color: rgb(251, 255, 191);">             <label></label>         </div>         <div style="background-color: rgb(137, 186, 255);">             <label>New</label>         </div>         <div style="background-color: rgb(251, 216, 255);">             <label></label>         </div></div>
        </div>

</body>

我共享整个页面的原因是因为我认为所有部分都彼此分开工作，但是当它们聚集在一个页面中时，它就会变得一团糟。现在问题不在电脑上，而是在手机上。我在分辨率为 1080 X 2400 的 OnePlus 8T 上遇到了问题。为了让你们所有人都能解决这个问题，我在分辨率和 Android 版本 11 与我的手机相同的 Android 模拟器上对其进行了测试，也出现了问题.这是我得到的结果的图像:
enter image description here
如您所见，orderHistory 的网格被裁剪并且字体太大。我已经在同一台设备上用 firefox 进行了测试，但它的作用就像一个魅力。想要的结果是看到具有小字体的订单历史记录，因此所有内容都适合 1 行。
我已经发现，当您完全删除 <div id="agentPortfolio"> 以及该 div 中的所有内容时，问题就解决了，那么这种组合有什么问题呢？
我希望我已经提供了有关问题所在以及如何复制它的足够信息，以便您可以帮助我解决这个问题:)

最佳答案

你可以向你的 css 文件添加一个媒体查询，它会起作用我检查过它所以如果宽度低于 700px，媒体查询中的样式将被应用:

#orderHistory {
    margin-top: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    width: 100%;
}

#orderHistoryContent {
    padding-top: 20px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
    width: 100%;
}

#orderHistoryContent div {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    padding: 2px;
}

.order-history-header {
    font-weight: bold;
}

#orderHistoryContent label {
    font-size: calc(0.2em + 1vw)
}

.title {
    display: block;
    text-align: center;
    color: #1D0F73;
    font-size: 22px;
    font-weight: bold;
    padding: 5px;
}
@media screen and (max-width: 700px){
    #orderHistoryContent {
        padding:0;
    }

    #orderHistoryContent div { font-size: 1vw;}

}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="orderHistory">

            <label class="title">Order history</label>
            <div id="orderHistoryContent">
                <div class="order-history-header">
                    <label>Action</label>
                </div>
                <div class="order-history-header">
                    <label>Market</label>
                </div>
                <div class="order-history-header">
                    <label>Coin</label>
                </div>
                <div class="order-history-header">
                    <label>DateTimeEntered</label>
                </div>
                <div class="order-history-header">
                    <label>Quantity</label>
                </div>
                <div class="order-history-header">
                    <label>Amount</label>
                </div>
                <div class="order-history-header">
                    <label>Target price</label>
                </div>
                <div class="order-history-header">
                    <label>Limit price</label>
                </div>
                <div class="order-history-header">
                    <label>Price</label>
                </div>
                <div class="order-history-header">
                    <label>DateTimeExecuted</label>
                </div>
                <div class="order-history-header">
                    <label>Status</label>
                </div>
                <div class="order-history-header">
                    <label>Profit</label>
                </div>
            <div style="background-color: rgb(251, 216, 255);">             <label>Buy</label>         </div>         <div style="background-color: rgb(255, 255, 255);">             <label>USDT</label>         </div>         <div style="background-color: rgb(220, 255, 193);">             <label>BTC</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>2021-05-08 00:00:00</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>999999.00000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.00</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>0.000000</label>         </div>         <div style="background-color: rgb(255, 227, 214);">             <label>56723.640000</label>         </div>         <div style="background-color: rgb(251, 255, 191);">             <label></label>         </div>         <div style="background-color: rgb(137, 186, 255);">             <label>New</label>         </div>         <div style="background-color: rgb(251, 216, 255);">             <label></label>         </div></div>
        </div>
</body>
</html>

关于HTML 相对字体太大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67455611/

上一篇：python - 使用 pandas dataframe 时使用 append 后列的顺序发生了变化

下一篇：python - pytorch 是否注册分配给对象属性的模块？

相关文章：

css - 网格中每列内的中心图像

javascript - 当我点击页面的任何部分时，Jquery 使类恢复到原来的状态

javascript - 如何在jquery中不创建文本框的情况下显示&lt;input type ='' text'>？

javascript - 使用 JavaScript 停止所有 HTML5 音频/视频

javascript - createElement 与 createElementNS

html - 如果悬停之前的文本，如何在图像上启用悬停效果？

javascript - jQuery 悬停不悬停

html - div 内的额外空间

Jquery Id 选择器不适用于 Js Id 选择器

html - 背景尺寸问题？

©2024 IT工具网  联系我们