应用特定于屏幕分辨率的CSS样式

时间:2018-05-24 09:01:08

标签: css media-queries screen-resolution

如何为不同的屏幕分辨率应用样式

例如:我的计算机最大屏幕分辨率为 1366 X 768 并且只想为此分辨率指定css样式。

Css @media规则只考虑浏览器的最小宽度和最大宽度我如何针对特定分辨率进行定位。

website

4 个答案:

答案 0 :(得分:1)

使用分辨率标记,即:

@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

此处有更多解释和语法:https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

答案 1 :(得分:1)

试试这个:

@media screen and (min-width: 1366px) and (max-width: 1366px)
              and (min-height: 768px) and (max-height: 768px) {
    /* style */
}

答案 2 :(得分:1)

使用MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); connect(this, &MainWindow::append, this, &MainWindow::append_log); FakeLibrary *library_obj = new FakeLibrary; connect(ui->pushButton, &QPushButton::clicked, [this, library_obj]() { library_obj->run([this](const std::string &message) { emit append(QString::fromStdString(message)); qDebug() << QString::fromStdString(message); }); }); } void MainWindow::append_log(const QString &message) { ui->textEdit->append(message); } width媒体查询

height

匹配@media (width: 1366px) and (height: 768px) { :root { background: yellowgreen; } } px

的视口
  

Codepen example

无论如何,值得注意的是,除非您处于全屏模式,否则该规则将无法应用,因为浏览器的用户界面需要一些空间,因此实际的视口无法准确与选择的分辨率相同。

答案 3 :(得分:0)

你可以试试这个

("'coroutine' object has no attribute XXX method'")