Question

我有一个网页，旨在使用800px宽度的最小分辨率进行查看。我想向使用分辨率＆lt; 800px说类似

此网页旨在使用......的分辨率进行查看。

我该怎么做？这与CSS Media-Queries无关吗？

Answer 1

不将该文本作为实际内容放入文档中的另一种解决方案是使用伪元素。

CSS代码

@media all and (max-width: 799px) {

    body:before {
      content: "this webpage is best viewed...";
      display: block;
      position: fixed;
      padding: 20px;
      background: #fff;
      border: 2px #ccc solid;
      outline: 400px solid rgba(20,20,20, .7);
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

}

Answer 2

使用CSS media queries：

.resolution-warning {
    display: none;
}
@media screen and (max-width: 800px) {
    .resolution-warning {
        display: block;
    }
}

并在某处放入HTML：

<div class="resolution-warning">You screen resolution is too small.</div>

以下是demo 1和2，请尝试调整浏览器大小。

显示警告屏幕分辨率

2 个答案: