响应式设计布局之@media用法详解(转)
来源:互联网 发布:windows eds安装文件 编辑:程序博客网 时间:2024/05/16 00:44
常见写法:
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ .class { background: #ccc; }}
@media screen and
这是一种最常见的写法,后面跟上限定的屏幕尺寸
带all 跟 only的写法
一般all跟only都是对应在一起出现的
@media all and (min-width:xxx) and (max-width:xxx){/*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/}@media only screen and (min-width:xxx) and (max-width:xxx){/*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/}
device-aspect-ratio
device-aspect-ratio
可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:
用法:
@media only screen and (device-aspect-ratio:4/3)
-webkit-min-device-pixel-ratio
的常见值对比(是设备上物理像素和设备独立像素,设备像素比率)
-webkit-min-device-pixel-ratio: 1.0
- 所有非 Retina 的 Mac
- 所有非 Retina 的 iOS 设备
- Acer Iconia A500
- Samsung Galaxy Tab 10.1
- Samsung Galaxy S
- 其他设备
-webkit-min-device-pixel-ratio为1.3
- Google Nexus 7
-webkit-min-device-pixel-ratio为1.5
- Google Nexus S
- Samsung Galaxy S II
- HTC Desire
- HTC Desire HD
- HTC Incredible S
- HTC Velocity
- HTC Sensation
-webkit-min-device-pixel-ratio为2.0
- iPhone 4
- iPhone 4S
- iPhone 5
- iPad (3rd generation)
- iPad 4
- 所有Retina displays 的MAC
- Google Galaxy Nexus
- Google Nexus 4
- Google Nexus 10
- Samsung Galaxy S III
- Samsung Galaxy Note II
- Sony Xperia S
- HTC One X
-webkit-min-device-pixel-ratio: 3.0
- HTC Butterfly
- Sony Xperia S
转自 http://www.w3cways.com/1697.html
0 0
- 响应式设计布局之@media用法详解(转)
- 响应式布局——@media详解
- 响应式布局2之Media Query(媒介查询)
- 响应式布局解决方案之Media Query
- @media 响应式布局
- media响应式布局
- 响应式web设计之@media screen
- 响应式布局 媒体查询 media query的用法
- media响应式布局模版
- Media Queries(CSS3响应式设计)
- CSS——响应式布局之@media
- 详解CSS3特性@Media如何实现响应式设计
- 详解CSS3特性@Media如何实现响应式设计
- Html+Css_CSS3_CSS2 响应式布局 Media query(媒介查询)
- 响应式布局基本实现Media Query(媒介查询)
- 使用CSS3属性(@media)制作网站响应式布局
- 响应式布局基本实现Media Query(媒介查询)
- 学习之响应式Web设计:Media Queries和Viewports
- 视频会见项目总结
- 【HTTP】Fiddler(二) - 使用Fiddler做抓包分析
- C#复选框
- linphone-3.9.1 无界面版在openwrt上的移植
- 第五届校内选拔javaA组-子序列第一题
- 响应式设计布局之@media用法详解(转)
- 浅谈MyBatis 之 增删改查(CRUD) (二)
- 【Maven】Nexus(Maven仓库私服)下载与安装
- 【HTTP】Fiddler(三)- Fiddler命令行和HTTP断点调试
- 计算哈夫曼编码长度
- Go 在游戏行业中的工程实践
- 欢迎使用CSDN-markdown编辑器
- 线性表
- r18_ap6330的步骤.txt