CSS Media Query

最新推荐文章于 2024-07-29 14:03:52 发布

转载最新推荐文章于 2024-07-29 14:03:52 发布 · 780 阅读

本文介绍如何利用CSS3的媒体查询实现响应式Web设计，确保网站能在不同设备上完美展示。通过具体的代码示例，帮助开发者了解如何根据不同屏幕尺寸调整样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动互联网时代，新设备层出不穷，各种屏幕大小和分辨率的出现，为Web前端设计增加了一些挑战。如何让网站或Web应用完美显示在各种不同的设备上呢？答案是采用响应式设计，让页面根据设备屏幕自动适应并调整。

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

　Max Width

　　当页面视图区域小于600px宽度的时候，css会被使用到。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

　　你也可以使用下面的方式，在页面的<head>中引用外部css文件。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

多个 Media Queries

　　你可以把多个media queries组合在一起，当视图区域宽度在600px到900px之间的时候，会使用下面的css。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

设备Width

　　下面的css会在 max-device-width为480px的时候使用，例如iphone。

　　note：max-device-width指的是设备实际分辨率，max-width指的是可视区域尺寸。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

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

iPhone5

Css代码 

@media screen and (device-aspect-ratio: 40/71) {  

}  

or  

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){  

}

Blackberry Torch

Css代码 

@media screen and (max-device-width: 480px) {   

}  

Samsung S3

Css代码 

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

}  

Google Nexus 7

Css代码 

@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) {  

}  

iPad Mini

Css代码 

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

}  

iPad 3

横向

Css代码 

@media (max-device-width: 1024px) and (orientation: landscape) {   

}  

竖向

Css代码 

@media (max-device-width: 768px) and (orientation: portrait) {   

}  

Galaxy Tab 10.1

横向

Css代码 

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

}  

竖向

Css代码 

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

}  