用于响应式设计的CSS媒体查询

时间:2019-07-08 09:52:42

标签: css media-queries

我已经完成了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) {}

1 个答案:

答案 0 :(得分:0)

对各种设备进行常规媒体查询,而不是确切的查询。

这总是可以帮助Media Queries,建议您在定位所有元素之前先查看此处,以便对其进行构想/实验。