Question

这是我尝试过的代码：

@media screen and (max-height:450px) and (height<width){
    .hero-text-box{
        margin-top:25px !important;
    }
}

Answer 1

使用orientation参数。

@media (min-width: 400) and (orientation: landscape) { /* rules */ }

以下是：

当“高度”媒体要素的值大于或等于“宽度”媒体要素的值时，“方向”媒体要素为“纵向”。否则'方向'就是'风景'。

MDN上的

Documentation

Answer 2

您可以使用lanscape / portrait选项：

(target1|target2|target3|targetN)

我从strpos()

中提取了解决方案

Answer 3

您可以像在其他答案中一样检查方向，或，您可以检查aspect-ratio：

@media screen and (max-height:450px) and (min-aspect-ratio:1/1){
    .hero-text-box{
        margin-top:25px !important;
    }
}

Answer 4

使用（方向：横向）是解决此特定问题的绝佳选择。但是，您需要在存储库中添加更多弹药。

有时您需要为特定设备设置样式。有时视网膜，有时是HD，有时是iphone 6+等.CSS-tricks.com有一篇很棒的文章（自2010年初版发布以来已经更新），可以为任何设备提供媒体查询： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

我在项目中使用Sass，因此我为我的项目创建了一个媒体查询mixin（_mediaQuery.scss）。它非常简陋，但是当我需要为特定设备设计样式时，它为我提供了选择。积分在评论中：

＆＃13;

/*Credit: David Walsh 10/22/2014
  https://davidwalsh.name/write-media-queries-sass
*/
$tablet-width: "";
$desktop-width: "";

@mixin tablet() {
	@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
		@content;
	}
}

@mixin desktop() {
	@media (min-width: #{$desktop-width}) {
		@content;
	}
}

/* **************************************************************** */

/*Credit: Josh Brewer, March 10, 2010
  https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/

@mixin retina() {
	@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
		@content;
	}
}

@mixin print() {
	@media print {
		@content;
	}
}

/* Smartphones (portrait and landscape)*/
@mixin smartphone() {
	@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
		@content;
	}
}

/* Smartphones (landscape) */
@mixin smartphone-landscape() {
	@media only screen and (min-width : 321px) {
		@content;
	}
}

/* Smartphones (portrait)  */
@mixin smartphone-portrait() {
	@media only screen and (max-width : 320px) {
		@content;
	}
}

/* iPads (portrait and landscape) */
@mixin ipad() {
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
		@content;
	}
}

/* iPads (landscape) */
@mixin ipad-landscape() {
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
		@content;
	}
}

/* iPads (portrait)*/
@mixin ipad-portrait() {
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
		@content;
	}
}
/* Desktops and laptops */
@mixin desktop() {
	@media only screen and (min-width : 1224px) {
		@content;
	}
}

/* Large screens */
@mixin large-screen() {
	@media only screen and (min-width : 1824px) {
		@content;
	}
}

/* iPhone 6-7 (portrait &; landscape)*/
@mixin iphone-current() {
	@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
		@content;
	}
}

/* iPhone 6 (landscape) */
@mixin iphone-current-landscape() {
	@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
		@content;
	}
}

/* iPhone 6 (portrait) */
@mixin iphone-current-portrait() {
	@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
		@content;
	}
}

/* iPhone 6/7+ (portrait &; landscape)*/
@mixin iphone-current-p() {
	@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
		@content;
	}
}

/* iPhone 6/7+ (landscape) */
@mixin iphone-current-p-landscape() {
	@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
		@content;
	}
}

/* iPhone 6/7+ (portrait) */
@mixin iphone-current-p-portrait() {
	@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
		@content;
	}
}

/* iPhone 5 (portrait &; landscape) */
@mixin iphone-previous() {
	@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
		@content;
	}
}

/* iPhone 5 (landscape)*/
@mixin iphone-previous-landscape() {
	@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
		@content;
	}
}

/* iPhone 5 (portrait) */
@mixin iphone-previous-portrait() {
	@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
		@content;
	}
}

＆＃13;

Answer 5

老问题，但发布了一个未来访问者可能会觉得有用的答案。实现高度 > 宽度（反之亦然）的一种方法是使用视口。

例如

import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider } from '@ui-kitten/components';
import { default as mapping } from './path-to/mapping.json'; // <-- import mapping

export default () => (
  <ApplicationProvider 
    {...eva}
    customMapping={mapping} // <-- apply mapping
    theme={eva.light}>
  </ApplicationProvider>
);

这只会在高度>宽度相反使用@media (max-width: 100vh) { background-color: red; }而不是min-width时将背景颜色设置为红色

注意这两个是等价的

max-width

我怎么能在CSS媒体查询中说“height＆lt; width”？

5 个答案: