media对各种设备的判断-可以用于响应式设计
来源:互联网 发布:淘宝详情页怎么套版 编辑:程序博客网 时间:2024/04/28 02:40
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Smartphones (portrait and landscape) */}@media only screen and (min-width : 321px) { /* Smartphones (landscape) */}@media only screen and (max-width : 320px) { /* Smartphones (portrait) */}@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* iPads (portrait and landscape) */}@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* iPads (landscape) */}@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* iPads (portrait) */}@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* iPhone 4 */}@media screen and (max-width : 640px) { /*640px */}@media screen and (max-width : 800px) { /* 800px */}@media screen and (max-width : 1024px) { /* 1024px */}@media only screen and (min-width : 1224px) { /* Desktops and laptops */}@media only screen and (min-width : 1824px) { /* Large screens */}@media only screen and (min-width: 320px) { /* Small screen, non-retina */}@mediaonly screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),only screen and ( min-resolution: 192dpi) and (min-width: 320px),only screen and ( min-resolution: 2dppx) and (min-width: 320px) { /* Small screen, retina, stuff to override above media query */}@media only screen and (min-width: 700px) { /* Medium screen, non-retina */}@mediaonly screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),only screen and ( min-resolution: 192dpi) and (min-width: 700px),only screen and ( min-resolution: 2dppx) and (min-width: 700px) { /* Medium screen, retina, stuff to override above media query */}@media only screen and (min-width: 1300px) { /* Large screen, non-retina */}@mediaonly screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),only screen and ( min-resolution: 192dpi) and (min-width: 1300px),only screen and ( min-resolution: 2dppx) and (min-width: 1300px) { /* Large screen, retina, stuff to override above media query */}
更好的方法是分离css文件,更易于维护
<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" /><link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />最后不要忘了加上viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
0 0
- media对各种设备的判断-可以用于响应式设计
- @media screen针对不同移动设备-响应式设计
- 响应式Web设计:Media Queries和Viewport的困惑
- CSS3 Media Query实现响应式Web设计(针对不同移动设备宽度)
- CSS3 Media Query实现响应式Web设计(针对不同移动设备宽度)
- CSS3 Media Queries 响应式网页设计
- CSS3 Media Queries 实现响应式设计
- CSS3 Media Queries 实现响应式设计
- Media Queries(CSS3响应式设计)
- 响应式web设计之@media screen
- CSS3 Media Queries响应式web设计
- 10个用于响应式Web设计的CSS框架
- 用于响应式设计的9个CSS技巧
- 用于响应式设计的9个CSS技巧
- 用于响应式设计的9个CSS技巧
- 用于响应式设计的9个CSS技巧
- 用于响应式设计的9个CSS技巧
- 用于响应式设计的9个CSS技巧
- LeetCode-Palindrome Partitioning
- cocos2d资源管理问题
- Codeforces 452B 4-point polyline (暴力出奇迹)
- android里camera支持的预览尺寸的获取
- utf-8与unicode的区别
- media对各种设备的判断-可以用于响应式设计
- Facebook也要玩智能眼镜
- UNIX环境编程笔记之STDIN_FILENO
- 第151天
- 线段树题目 汇总 讲解(by not only success)
- 使用XCode6打开项目以后再用XCode5出现的问题fatal error: malformed or corr
- WCF服务在IIS发布时遇到的一些配置问题
- unity3d导入jar包发布出现错误No resource found that matches the given name 'Theme.AppCompat.Light'.
- JavaLearing: JAVA IO BufferedReader