一些实用的CSS Media Query代码片段,个人采集_html/css_WEB-ITnose
-
原创
-
2016-06-24 11:30:48
800浏览
CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果。
以下是一些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) {
- }
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。