0

I'm trying to define my mobile support matrix in one place using less. I also looked at examples from this StackOverflow question.

Approach 1: Not working

@my-device-min-width: 375px;
@my-device-max-width: 414px;
@my-device-orientation: portrait;

@phoneRules: ~"only screen and (min-width: {@device-min-width}) and (max-width: {@device-max-width}) and (orientation: {@device-orientation})";

Approach 2: Not working

@my-device-min-width: {min-width: 375px;};
@my-device-max-width:  {max-width: 414px;};
@my-device-orientation: {orientation:portrait;};


@phoneRules: only screen and  (@device-min-width) and (@device-max-width) and (@device-orientation);

Please provide some explanation along with an answer to help me understand it better.

ScrapCode
  • 2,109
  • 5
  • 24
  • 44

1 Answers1

0

Pure CSS?

@media screen and (min-width:320px) and (max-width:767px) and (orientation:portrait) {
  /* Your code here */
}

(it'll work in Less too.)

benhatsor
  • 1,863
  • 6
  • 20