移动和桌面媒体查询优先级

Question

我是前端 Web 开发的初学者。我想知道在桌面优先方法中编写 CSS 媒体查询时的优先顺序。我是不是先写移动查询，然后再写平板查询，这样：

/*Desktop CSS*/ /*Media query for tablet*/ /*Media query for Mobile*/

或反过来。

Answer 1

你可以在任何地方写，但如果你是初学者，那么我建议你为响应式创建一个单独的文件 CSS 这样你就不会感到困惑。因此，在 style.css 桌面方法和 responsive.css 所有针对移动设备和平板电脑的媒体查询中。 Standered 媒体查询：

@media screen and (min-width: 1200px){} /* Desktop */
@media screen and (min-width: 1025px) and (max-width: 1199px){} /* small laptop */
@media screen and (min-width: 768px) and (max-width: 1024px){} /* tablet */
@media screen and (min-width: 575px) and (max-width: 767.98px){} /* tablet and large mobiles */
@media screen and (min-width: 320px) and (max-width: 480px){} /* Mobile*/

谢谢

移动和桌面媒体查询优先级

Mobile and Desktop media query priority

html

css

media-queries

web-frontend