解决方法
我到处寻找最好的答案。这里我发现了。
@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 */ }
我认为这是更好地考虑与移动第一方法。从移动样式表开始,然后应用与其他设备相关的媒体查询。感谢@ryanve。这是link。