CSS响应式设计iPad专有CSS3_CSS Responsive design iPad-Specific CSS3

摘自:http://css-tricks.com/snippets/css/ipad-specific-css/在做响应式设计的时候个人兼容性css代码则将下面ipad兼容代码加入:

@media only screen and (device-width: 768px) {
/* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}

在为各种手持设备专有的css则如下:

@media handheld, only screen and (max-width: 980px),only screen and (device-width: 768px){}

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

http://css-tricks.com/snippets/css/ipad-specific-css/

关于 RainZhai

玩的么wande.me,web development machine博主,rain css前端框架作者,blogger,html5游戏爱好者
此条目发表在 CSS & HTML 分类目录,贴了 , , 标签。将固定链接加入收藏夹。

文章评论 Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>