我一直在做一些关于媒体查询的研究,但我仍然不大明白如何针对某些尺寸的设备。
我希望能够针对桌面、平板和移动设备。我知道会有一些差异,但如果有一个通用的系统可以用来针对这些设备,那就更好了。
我发现了一些例子。
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
或。
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
你认为这些'断点'对每个设备应该是什么?
IMO这些是最好的突破点。
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
编辑。完善后可更好地与960个网格配合使用。
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
在实践中,许多设计师将像素转换为em,主要是因为em能更好地承受缩放。在标准变焦时1em === 16px
。用像素乘以1em/16px
,就可以得到等分。例如,320px === 20em
。
作为对评论的回应,"最小宽度 "是"移动优先"设计的标准,即你从最小的屏幕开始设计,然后添加不断增加的媒体查询,以适应越来越大的屏幕。不管你是喜欢 "最小"、"最大 "还是它们的组合,都要注意规则的顺序,记住如果多个规则匹配同一个元素,后面的规则将覆盖前面的规则。
如果你想针对一个设备,那么只要写上min-device-width
。比如说。
@media only screen and (min-device-width: 480px){}
@media only screen and (min-device-width: 768px){}
这里有一些好文章。
1.我用这个网站找到了分辨率,并按实际数字开发了CSS。 我的数字与上面的答案有很大的不同,只是我的CSS实际上达到了预期的设备。
2.另外,在你的媒体查询之后要有这段调试的代码 比如说
@media only screen and (min-width: 769px) and (max-width: 1281px) {
/*用于10英寸平板电脑屏幕 */
body::before {
content: "tablet to some desktop media query (769 > 1281) fired" 。
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9); /* 半透明的黄色 */
position: absolute;
top:0;
left: 0;
right: 0;
z-index:99;
}
}
在每一个媒体查询中添加这个调试项,你会看到应用了什么查询。