Question

enter image description here我在我的网站上使用此模板https://templated.co/fetchingly。但它没有响应。我不是一个ui开发人员，但我已经看过w3学校和其他教程，并且看到确实包含了所有必需的标签。但仍然没有响应。任何人都可以帮我这个让我的网站响应吗？

在普通桌面看起来不错，但在手机和ipad中我可以看到div没有响应。 div与颜色重叠，不能看到文本。

Answer 1

您可以使用media queries。

@media only screen and (min-width: 400px) and (max-width: 800px) {
  .yourDiv { 
    yourCss;
  }
}

Answer 2

您可以指定媒体查询以根据下面的代码等各种分辨率更改显示，甚至可以使用Bootstrap，这样可以更轻松。

＆＃13;

    /* Extra small devices (portrait phones, less than 576px) */

    @media only screen  (max-width: 575.98px) {
        .some-selector {
            /* Property: value;*/
        }
    }

    /* Small devices (landscape phones, 576px and up) */

    @media only screen (min-width: 576px) and (max-width: 767.98px) {
        .some-selector {
            /* Property: value;*/
        }
    }

    /* Medium devices (tablets, 768px and up) */

    @media only screen (min-width: 768px) and (max-width: 991.98px) {
        .some-selector {
            /* Property: value;*/
        }
    }

    /* Large devices (desktops, 992px and up) */

    @media only screen (min-width: 992px) and (max-width: 1199.98px) {
        .some-selector {
            /* Property: value;*/
        }
    }

    /* Extra large devices (large desktops, 1200px and up) */

    @media only screen (min-width: 1200px) {
        .some-selector {
            /* Property: value;*/
        }
    }

＆＃13;

Answer 3

为什么不尝试使用Bootstrap框架？如果您之前没有尝试过，请学习如何使用bootstrap创建响应式Web设计。

或者您需要了解如何使用HTML和CSS来调整大小，隐藏，缩小，放大或移动内容，以使其在任何屏幕上都看起来很好。

一些改善自己的资源;

HTML Responsive Web Design

Responsive Web Design With Css

Responsive Web Design With Bootstrap

我的网站在移动设备上无响应

3 个答案: