How can I say "height <width" in a CSS multimedia query?

Question

This is the code I tried:

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

Answer 1

Use option orientation.

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

Which does the following:

"Reference media" is a portrait when the value of the "height carrier" is greater than or equal to the value of the "media width". Otherwise, “orientation” is “landscape”.

MDN Documentation

Answer 2

You can use the lanscape / portrait option:

/* Portrait */
@media screen (max-height:450px) and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen (max-height:450px) and (orientation:landscape) {
    /* Landscape styles */
}

I extracted a solution from: media query for browser size where width is less than height

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/

I use Sass in my projects, so I created a mixin media query (_mediaQuery.scss) for my projects. This is very rudimentary, but it gives me options when I need to style something for a specific device. Loans are in the comments:

/*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;
	}
}