一些实用的CSS Media Query代码片段，个人采集_html/css_WEB-ITnose

css3的出现让响应式web设计变得简单，css3提供了强大的media queries，允许你针对不同的条件设置不同的样式，可以在不修改页面内容的情况下，为不同设备提供不同的样式效果。

以下是一些css media queries代码片段，你可以添加在自己的项目中，让页面根据屏幕自适应：

iphone5

Css代码

1. @media screen and (device-aspect-ratio: 40/71) {  
2. }  
3. or  
4. @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){  
5. }  

Blackberry Torch

Css代码

1. @media screen and (max-device-width: 480px) {   
2. }  

Samsung S3

Css代码

1. @media only screen and (-webkit-device-pixel-ratio: 2) {  
2. }  

Google Nexus 7

Css代码

1. @media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {  
2. }  

iPad Mini

立即学习“前端免费学习笔记（深入）”；

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

Css代码

1. @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {  
2. }  

iPad 3

横向

Css代码

1. @media (max-device-width: 1024px) and (orientation: landscape) {   
2. }  

竖向

Css代码

1. @media (max-device-width: 768px) and (orientation: portrait) {   
2. }  

Galaxy Tab 10.1

横向

Css代码

1. @media (max-device-width: 1280px) and (orientation: landscape) {   
2. }  

竖向

Css代码

1. @media (max-device-width: 800px) and (orientation: portrait) {   
   
2. }