@media only screen and (max-device-width: 480px) { //页面最大宽度480px
}
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" /> //外链式

  

@media only screen and (min-width:480px) and (max-width : 768px){ //480 < x < 768
}

device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:  

/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
} /* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
} /* for 480px*800px width screen Nexus One和Desire等手机 */
@media only screen and (device-aspect-ratio:5/3){
} /* retina分辨率 */
@media only screen and (-webkit-min-device-pixel-ratio: 2){
}

Media Queries详细的更多相关文章

  1. CSS3 Media Queries 详细介绍与使用方法[转]

    Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 关于Med ...

  2. CSS3 Media Queries 详细介绍与使用方法

    Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支持. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 到底什么是 ...

  3. 实践 HTML5 的 CSS3 Media Queries

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

  4. 基于 CSS3 Media Queries 的 HTML5 应用

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

  5. iPads和iPhones的Media Queries

    iPad Media Queries 1.iPad Media Queries (所有版本,包括iPad mini) iPads从第一代到至今,总共有五代,也就是iPad1~iPad5,以及Mini ...

  6. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  7. 使用CSS3 Media Queries实现网页自适应

    原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...

  8. Media Queries 详解

    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:  <link href="css/reset.css" rel ...

  9. CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)

    /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...

随机推荐

  1. 面试java简答题

    1.  sleep() 和 wait() 有什么区别? 答:1.这两个方法来自不同的类分别是Thread和Object      2.最主要是sleep方法没有释放锁,而wait方法释放了锁,使得其他 ...

  2. 【Android】创建、读取XML文件

    创建: package webdomain; import java.io.File; import java.io.FileNotFoundException; import java.io.Fil ...

  3. 总结调用Flash的几种方法

    一.Adobe 提供的方法 <object width="200" height="200" classid="clsid:D27CDB6E-A ...

  4. dom cookie记录用户名

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 前端复习-02-ajax原生以及jq和跨域方面的应用。

    ajax这块我以前一直都是用现成的jq封装好的东西,而且并没有深入浅出的研究过,也没有使用过原生形式的实现.包括了解jsonp和跨域的相关概念但是依然没有实现过,其中有一个重要的原因我认为是我当时并不 ...

  6. jxse2.6在jdk8下,JxtaMulticastSocket存在的问题

    JxtaMulticastSocket覆写了java.net.MulticastSocket的bind方法: @Override public void bind(SocketAddress addr ...

  7. Could not find a transformer to transform "SimpleDataType{type=org.mule.transport.NullPayload

    mule esb报错 com.isoftstone.esb.transformer.Json2RequestBusinessObject.transformMessage(Json2RequestBu ...

  8. spring 的properties解析

    一般使用PropertyPlaceholderConfigurer来替换占位符,例如: <bean class="org.springframework.beans.factory.c ...

  9. U盘FAT32文件系统

    一.FAT文件系统分为四个部分 参考别人的博客 1.http://blog.163.com/ourhappines@126/blog/static/121363154201311811495492/ ...

  10. POJ1651Multiplication Puzzle(区间DP)

    比较好做的区间DP 状态转移方程:DP[i][j] 表示区间[i,j]最小的乘积和. DP[i][j] = MIN{DP[i][k-1]+DP[k+1][j] + a[k]*a[i-1]*a[j+1] ...