我想构建一些媒体查询来覆盖PC /笔记本电脑的大部分宽高比.
我的第一个尝试是这样的：
@media screen and (min-device-aspect-ratio: 4/3){
header::after{
content: '4/3';
}
}
@media screen and (min-device-aspect-ratio: 16/9){
header::after{
content: '16/9';
}
}
@media screen and (min-device-aspect-ratio: 16/10){
header::after{
content: '16/10';
}
}
我正在从笔记本电脑测试这些查询,分辨率为1366×768,这是16/9宽高比,而不是16/10的最后一个查询执行.
我可以用经典的方式做到这一点：
@media (min-width:1025px) { /* big landscape tablets,laptops,and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
但我认为响应式设计应该更多地关注长宽比而不是屏幕宽度,因为它在4：3和宽16/9之间有很大的区别,或者也许我误解了响应式设计概念,但这就是我的想法.
解决方法
响应式设计的理念就是这样：您的设计会响应消费设计的媒体中的变化或甚至按需更改.无论您通过查看屏幕分辨率还是屏幕宽高比来完成这一操作,完全是一个实现细节,而不是很相关.
比例16/9评估为1.777 …而16/10评估为1.6.由于16/9的比例明显大于16/10,所以最小装置纵横比：16/9的任何一个都是最小装置纵横比：16/10.
解决方案是将16/10查询放在16/9之前,以便所有比率按升序排列：
@media screen and (min-device-aspect-ratio: 4/3) {
header::after {
content: '4/3';
}
}
@media screen and (min-device-aspect-ratio: 16/10) {
header::after {
content: '16/10';
}
}
@media screen and (min-device-aspect-ratio: 16/9) {
header::after {
content: '16/9';
}
}
请参阅我对this related question的回答,了解如何运作.
