CSS Media Query
2013-10-03 22:53
183 查看
移动互联网时代,新设备层出不穷,各种屏幕大小和分辨率的出现,为Web前端设计增加了一些挑战。如何让网站或Web应用完美显示在各种不同的设备上呢?答案是采用响应式设计,让页面根据设备屏幕自动适应并调整。
CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media
queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果。
当页面视图区域小于600px宽度的时候,css会被使用到。
你也可以使用下面的方式,在页面的<head>中引用外部css文件。
你可以把多个media queries组合在一起,当视图区域宽度在600px到900px之间的时候,会使用下面的css。
下面的css会在 max-device-width为480px的时候使用,例如iphone。
note:max-device-width指的是设备实际分辨率,max-width指的是可视区域尺寸。
以下是一些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) {
}
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) {
}
相关文章推荐
- CSS Media Query
- 7 CSS Media Query
- CSS Media Query
- CSS media query应用中的层叠特性使用最佳实践
- CSS media query应用中的层叠特性使用最佳实践
- 常用的CSS media Query
- Getting Started with CSS Media Queries
- 简单介绍CSS设置打印页面的方法及css里media的使用
- 用CSS中的Media类型实现响应式设计
- media-query
- 移动设备上的媒体查询 CSS media queries for mobile device
- CSS media queries
- CSS中规则@media的用法
- CSS media queries
- media query width vs device-width
- 让IE8支持@media query
- 移动设备上的媒体查询 CSS media queries for mobile device
- CSS media queries
- media-type,media-query
- media in the link element -CSS and select by #id