我已经完成了HTML网站,并使用CSS媒体查询完成了响应式设计。现在,如果我在任何设备上进行了任何更改,则意味着它正在影响另一个设备视图。因此,任何人都可以向我提供正确的媒体查询顺序来解决我的问题。我在下面提到了我的CSS媒体查询代码。
/*Responsive CSS*/
@media only screen and (min-width : 768px) and (max-width : 1280px) { }
@media only screen and (min-device-width : 1281px) and (max-device-width : 1380px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { }
/* iPad (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { }
@media only screen and (min-device-width: 411px) and (max-device-width : 823px) and (orientation: landscape) { }
/* iPad (Portrait & landscape) ----------- */
@media (max-width: 1024px) { }
/*Mobile Phones*/
@media (max-width: 767px) { }
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { }
/* Samsung Galaxy Note 3 */
@media screen and (min-device-width: 320px) and (min-device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}
/* ----------- Galaxy S3 ----------- */
/* Portrait */
@media screen and (min-device-width: 320px) and (min-device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) { }
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { }
@media only screen and (min-device-width : 1024px) and (max-device-width : 1380px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad Portrait */
@media only screen and (min-device-width:768px) and (max-device-width:1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { }
/* ----------- iPhone X ----------- */
/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { }
/* ----------- Galaxy S4, S5 and Note 3 ----------- */
/* Landscape */
@media screen and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}
/* ----------- Galaxy S3 ----------- */
/* Landscape */
@media screen and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) { }
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { }
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { }
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* ----------- iPhone 4 and 4S ----------- */
/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}