Question

This是在PC上的外观。 This是移动设备上的样子。我希望手机上的按钮较小（自动调整为屏幕尺寸）。

这是页面的HTML和CSS：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .container {
                position: relative;
                width: 100%;
            }
            .container img {
                width: 100%;
                height: auto;
                right: 0;
                top: 0;
            }
            .container .btn {
                position: absolute;
                top: 45%;
                left: 50%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #555;
                color: white;
                font-size: 20px;
                padding: 12px 24px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                text-align: center;
            }
            .container .btt {
                position: absolute;
                top: 45%;
                left: 24%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #555;
                color: white;
                font-size: 20px;
                padding: 12px 24px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                text-align: center;
            }
            .container .btc {
                position: absolute;
                top: 45%;
                left: 76%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #555;
                color: white;
                font-size: 20px;
                padding: 12px 24px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                text-align: center;
            }
            .container .btn:hover {
                background-color: white;
                color: black;
            }
            .container .btt:hover {
                background-color: white;
                color: black;
            }
            .container .btc:hover {
                background-color: white;
                color: black;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <img src="some img" alt="" class="alignnone size-full wp-image-1660" />
            <a href="some ref" <button class="btn">ER DU ARRANGØR?</button></a>
            <a href="some ref" <button class="btt">ER DU MARKEDSFØRER?</button></a>
            <a href="some ref" <button class="btc">KONTAKT OSS!</button></a></div>
    </body>

</html>

我假设，如果可能的话，解决方案是更改按钮的.container .btx。我找不到办法。

Answer 1

您绝对应该研究media queries。

它们使您可以在由各种参数（宽度，高度，方向）定义的不同屏幕上工作。

@media (max-width: 800px) { 
    //your code goes here
}

我认为这就是您想要的。

还可以查看viewport width and height单位（vh和vw），这些单位使您可以根据窗口的大小来调整元素的大小。

div{ 
    height: 50vh;//50% of the viewport (window) height
    width: 40vw;//40% of the viewport (window) width
}

Answer 2

我发现我的旧CSS代码具有响应能力。是的，您应该使用媒体，例如：

@media (max-width: 991px) {
    .quotesBox {
        font-size: 19px;
    }
    .ftrLinks li a {
        padding: 0px 15px;
    }
    .socialLinks li {
        padding: 0px 10px;
    }
    .socialLinks li a img {
        width: 37px;
        height: 37px;
    }
}

希望它能对您有所帮助

Answer 3

正如上面评论中回答的那样，您绝对应该检出function setAxisScales(chart, data){ // doing calculations on the data chart.options.scales.yAxes[0].ticks.max = max; chart.options.scales.yAxes[0].ticks.stepSize = step_size; }查询以及@media和vh。我也建议您看看calc()。

我对vw，vh，vw进行了一些小的修改，对代码进行了一些微调，这就是我想出的。调整calc()和width中的值以适合您的需要。是的，我在这里不使用calc()。

@media

CSS按钮可自动调整为窗口大小

3 个答案: