使网站响应的标准媒体查询[重复]

Posted 2023-03-06

【中文标题】使网站响应的标准媒体查询[重复]

【英文标题】：Standard Media Query to make website responsive [duplicate]

【发布时间】：2019-01-07 10:07:36

【问题描述】：

是否有任何标准媒体查询可以申请我的网站或任何 css 代码，以便我的设计可以在桌面、移动设备等所有设备上响应。

【问题讨论】：

在这里学习：developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…

【参考方案1】：

/*============================================================================== 
    iPhone 4 and 4S || 320 x 480 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 320px) 
    and (max-width: 480px)


@media only screen and (min-width: 320px) 
    and (max-width: 480px) and (orientation: portrait) 


@media only screen and (min-width: 320px) 
    and (max-width: 480px) and (orientation: landscape) 


/*============================================================================== 
    iPhone 5, 5S, 5C and 5SE || 320 x 568 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 320px) 
    and (max-width: 568px)


@media only screen and (min-width: 320px) 
    and (max-width: 568px) and (orientation: portrait) 


@media only screen and (min-width: 320px) 
    and (max-width: 568px) and (orientation: landscape) 


/*============================================================================== 
    iPhone 6, 6S, 7 and 8 || 375 x 667 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 375px) 
    and (max-width: 667px) 


@media only screen and (min-width: 375px) 
    and (max-width: 667px) and (orientation: portrait)  


@media only screen and (min-width: 375px) 
    and (max-width: 667px) and (orientation: landscape)  


/*============================================================================== 
    iPhone 6+, 7+ and 8+ || 414 x 736 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 414px) 
    and (max-width: 736px) 


@media only screen and (min-width: 414px) 
    and (max-width: 736px) and (orientation: portrait)  



@media only screen and (min-width: 414px) 
    and (max-width: 736px) and (orientation: landscape)  


/*============================================================================== 
    iPhone X || 375 x 812 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 375px) 
    and (max-width: 812px) 


@media only screen and (min-width: 375px) 
    and (max-width: 812px) and (orientation: portrait)  


@media only screen and (min-width: 375px) 
  and (max-width: 812px) and (orientation: landscape)  


/*============================================================================== 
    Galaxy S3 || 320 x 640 || Default, Portrait and Landscape
================================================================================ */
@media screen and (width: 320px) 
    and (height: 640px)


@media screen and (width: 320px) 
    and (height: 640px) and (orientation: portrait) 


@media screen and (width: 320px) 
    and (height: 640px) and (orientation: landscape) 


/*============================================================================== 
    Windows Phone 480 x 800 Default, Portrait and Landscape
================================================================================ */
@media screen and (width: 480px) 
    and (height: 800px) 


@media screen and (width: 480px) 
    and (height: 800px) and (orientation: portrait) 


@media screen and (width: 480px) 
    and (height: 800px) and (orientation: landscape) 



/*============================================================================== 
    iPad 1, 2, Mini and Air || 768 x 1024 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 768px) 
    and (max-width: 1024px) 


@media only screen and (min-width: 768px) 
    and (max-width: 1024px) and (orientation: portrait) 


@media only screen and (min-width: 768px) 
  and (max-width: 1024px) and (orientation: landscape) 



/*============================================================================== 
    iPad Pro 10.5 || 834 x 1112 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 834px) 
    and (max-width: 1112px)


@media only screen and (min-width: 834px) 
    and (max-width: 834px) and (orientation: portrait) 


@media only screen and (min-width: 1112px) 
  and (max-width: 1112px) and (orientation: landscape) 



/*============================================================================== 
    iPad Pro 12.9 || 1024 x 1366 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 1024px) 
    and (max-width: 1366px)


@media only screen and (min-width: 1024px) 
    and (max-width: 1024px) and (orientation: portrait) 


@media only screen and (min-width: 1366px) 
  and (max-width: 1366px) and (orientation: landscape) 



/*============================================================================== 
    Galaxy Tab 2 || 800 x 1280 || Default, Portrait and Landscape
================================================================================ */
@media (min-width: 800px) and (max-width: 1280px) 


@media (max-width: 800px) and (orientation: portrait)  


@media (max-width: 1280px) and (orientation: landscape)  


/*============================================================================== 
    Nexus 7 || 601 x 906 || Default, Portrait and Landscape
================================================================================ */
@media screen and (width: 601px) 
    and (height: 906px)


@media screen and (width: 601px) 
  and (height: 906px) and (orientation: portrait) 


@media screen and (width: 601px) 
    and (height: 906px) and (orientation: landscape) 


/*============================================================================== 
    Nexus 9 || 1536 x 2048 || Default, Portrait and Landscape
================================================================================ */
@media screen and (width: 1536px) and (height: 2048px) 


@media screen and (width: 1536px) 
    and (height: 2048px) and (orientation: portrait) 


@media screen and (width: 1536px) 
    and (height: 2048px) and (orientation: landscape) 


/*============================================================================== 
    Kindle Fire HD 8.9 || 1200 x 1600 || Default, Portrait and Landscape
================================================================================ */
@media only screen and (min-width: 1200px) 
    and (max-width: 1600px)


@media only screen and (min-width: 1200px) 
    and (max-width: 1600px) and (orientation: portrait) 


@media only screen and (min-width: 1200px) 
    and (max-width: 1600px) and (orientation: landscape) 

【参考方案2】：

使用它来制作响应式网站

@media only screen and (max-width: 1200px) 
    <!-- For Desktop -->

@media only screen and (max-width: 992px) 
    <!-- For Laptop -->

@media only screen and (max-width: 767px) 
    <!-- For Tab -->

@media only screen and (max-width: 480px) 
    <!-- For Mobile -->