...

1、使用media的时候需要先设置<meta>标签来兼容移动设备的展示。 <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0 ...

...

1、判断横竖屏 2、判断设备宽高 3、判断设备像素比 4、常用设备尺寸 苹果手机参考： pad参考： 更多设备参考：Mobile devices 5、设备尺寸设置示例： ...

试过，比较能匹配到移动端屏幕 ...

主要用于移动端内容适配，由于移动端有时候需要根据高度来进行适配，比如iPhone4和iPhone5的宽度一样，但是高度不同 /*iphone4*/ @media only screen and (max-width: 320px) and (max-width: 480px) { html ...

一、媒体查询用法 @media 媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询 ...

媒体查询语法： 1.内联写法：and之后必须有空格@media screen and (min-width:960px //判断浏览器大小条件){body{background：red} //常规的样式} 2.外联写法：当满足屏幕满足条件的时候连接href后的css文件<link ...