CSS: iPhone Custom CSS

CSS媒体查询与响应式设计

最新推荐文章于 2024-09-09 18:37:51 发布

weixin_30612769

最新推荐文章于 2024-09-09 18:37:51 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xkzy/p/4087425.html

本文详细介绍了使用CSS媒体查询实现响应式网页设计的方法，包括针对不同设备和屏幕方向的具体样式调整。通过一系列示例代码展示了如何为iPhone等设备定制布局。

1. [代码][CSS]代码

<style type="text/css" media="screen">

/* iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio:2){
#innerWrap{ width: 650px; }
#container{ width: inherit; }
}

@media all and (max-device-width: 480px){
#innerWrap{ width: 650px; }
#container{ width: inherit; }
}http://www.huiyi8.com/lunwenppt/

@media screen and (orientation:portrait) and (min-device-width: 768px) and (max-device-width: 1024px){

#innerWrap{ width: 1024px; border: 0px solid yellow; }
#container{ width: 650px; border: 0px solid violet; }
}毕业设计答辩ppt
@media screen and (orientation:landscape) and (min-device-width: 768px) and (max-device-width: 1024px){
#innerWrap{ width: 1024px; border: 0px solid yellow; }
#container{ width: 650px; border: 0px solid violet; }
}
*/

</style>

<link media="only screen and (max-width: 320px)" rel="stylesheet" type="text/css" href="http://kuscinteractive.org/css/nowplaying/iphone_portrait.css"/>
<link rel="stylesheet" media="all and (orientation:portrait)" type="text/css" href="http://kuscinteractive.org/css/nowplaying/portrait.css">


<link media="only screen and (min-width: 321px)" rel="stylesheet" type="text/css" href="http://kuscinteractive.org/css/nowplaying/iphone_landscape.css"/>
<link media="all and (orientation:landscape)" rel="stylesheet" type="text/css" href="http://kuscinteractive.org/css/nowplaying/landscape.css">


<link media="only screen and (-webkit-min-device-pixel-ratio: 2)" rel="stylesheet" type="text/css" href="http://kuscinteractive.org/css/nowplaying/retina.css" />