- 浏览: 414335 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
IThead:
纠结了几天,用了你的方法,现在解决了,谢谢!
Eclipse 写Javascript卡死问题 -
Rubicon__:
你好,我在运用PageWidget这个类时,出现第一页翻到第二 ...
android翻书效果实现原理( 贝塞尔曲线绘制原理/点坐标计算) -
lionios:
如果不显示printDialog,则打印出来的是空白页,请问你 ...
Print打印机例子 -
rayln:
weiqiulai 写道哥们儿,我怎么没有看到监控队列的配置和 ...
JMS监听MQ实例 -
weiqiulai:
哥们儿,我怎么没有看到监控队列的配置和代码?
JMS监听MQ实例
CSS3 Media Queries在iPhone4和iPad上的运用
- 博客分类:
- Html5&Css3
http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads
那么以后大家在iPhone4和iPad设备上,就可以按照横竖板来定样式了:
1、iPhone4竖板
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){
/*你的样式写在这里*/
}
2、iPhone横板
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){
/*你的样式写在这里*/
}
3、iPad竖板
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/*你的样式写在这里*/
}
4、iPad横板
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/*你样式写在这里*/
}
上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的,至于其他的运用,大家参考下面我重新整理的CSS3 Media Queries模板:
CSS3 Media Queries 模板:
1、Smartphones (竖板和横板)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)" />
2、Smartphones (横板)
@media only screen and (min-width : 321px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones-landscape.css" media="only screen and (min-width : 321px)" />
3、Smartphones (竖板)
@media only screen and (max-width : 320px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones-portrait.css" media="only screen and (max-width : 320px)" />
4、iPad(竖板和横板)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />
5、iPad横板
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />
6、iPad的竖板
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />
7、Desktops and laptops
@media only screen and (min-width : 1224px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="desktops-and-laptops.css" media="only screen and (min-width : 1224px)" />
8、Large screens
@media only screen and (min-width : 1824px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="large-screens.css" media="only screen and (min-width : 1824px)" />
9、iPone4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)" />
10、iPhone4竖板
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){
/*你的样式写在这里*/
}
//===或者====//
< link rel="stylesheet" href="iphone4-portrait.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait)" />
11、iPhone4横板
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){
/*你的样式写在这里*/
}
//===或者====//
< link rel="stylesheet" href="iphone4-landscape.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape)" />
上面罗列了常用的CSS3 Media Queries模板,特别是在移动设备上的几种,希望对大家在今后的移动开发端上的运用有所帮助。当然CSS3 Media Queries的运用条件往往不只这些,大家完全可以根据自己的需求去定义不同的条件,但个人建议,使用CSS3 Media Queries采用主流就Ok了。随着潮流走嘛。那么今天就扯到这了。如果大家有更好的经验,可以通过下面的评论与我们一起分享。
2012年04月16日更新:iPad 3 Media Query
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)
{
// your CSS
}
如需转载烦请注明出处:W3CPLUS
那么以后大家在iPhone4和iPad设备上,就可以按照横竖板来定样式了:
1、iPhone4竖板
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){
/*你的样式写在这里*/
}
2、iPhone横板
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){
/*你的样式写在这里*/
}
3、iPad竖板
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/*你的样式写在这里*/
}
4、iPad横板
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/*你样式写在这里*/
}
上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的,至于其他的运用,大家参考下面我重新整理的CSS3 Media Queries模板:
CSS3 Media Queries 模板:
1、Smartphones (竖板和横板)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)" />
2、Smartphones (横板)
@media only screen and (min-width : 321px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones-landscape.css" media="only screen and (min-width : 321px)" />
3、Smartphones (竖板)
@media only screen and (max-width : 320px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="smartphones-portrait.css" media="only screen and (max-width : 320px)" />
4、iPad(竖板和横板)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />
5、iPad横板
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />
6、iPad的竖板
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />
7、Desktops and laptops
@media only screen and (min-width : 1224px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="desktops-and-laptops.css" media="only screen and (min-width : 1224px)" />
8、Large screens
@media only screen and (min-width : 1824px) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="large-screens.css" media="only screen and (min-width : 1824px)" />
9、iPone4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* 你的样式写在这里 */
}
//===或者====//
< link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)" />
10、iPhone4竖板
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){
/*你的样式写在这里*/
}
//===或者====//
< link rel="stylesheet" href="iphone4-portrait.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait)" />
11、iPhone4横板
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){
/*你的样式写在这里*/
}
//===或者====//
< link rel="stylesheet" href="iphone4-landscape.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape)" />
上面罗列了常用的CSS3 Media Queries模板,特别是在移动设备上的几种,希望对大家在今后的移动开发端上的运用有所帮助。当然CSS3 Media Queries的运用条件往往不只这些,大家完全可以根据自己的需求去定义不同的条件,但个人建议,使用CSS3 Media Queries采用主流就Ok了。随着潮流走嘛。那么今天就扯到这了。如果大家有更好的经验,可以通过下面的评论与我们一起分享。
2012年04月16日更新:iPad 3 Media Query
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)
{
// your CSS
}
如需转载烦请注明出处:W3CPLUS
发表评论
-
文字实现水平垂直居中
2014-01-11 09:58 908文字实现水平垂直居中的关键代码: display: ... -
小兔快跑
2013-11-20 15:42 607<!DOCTYPE html PUBLIC " ... -
box-sizing使用
2013-07-17 13:32 675box-sizing : content-box || bor ... -
如何通过CSS3的Clip制作饼图
2013-05-10 16:46 1029CSS3是个非常强大的玩意, 大家可以看看我的例子, 可以实现 ... -
CSS3的keyframe动画介绍
2013-05-07 13:50 493#sun.VeryHuo { animation-name ... -
CSS3 Media Queries
2013-04-27 10:44 808转载: http://www.w3cplus.co ... -
Three.js的模型软件Blender
2013-04-09 14:41 1113使用Blender软件可以非常简单的导出3D模型为json字符 ... -
本地文件拖拽到浏览器
2013-03-19 13:22 1056利用HTML5的File API可以实现文件拖拽到服务器上 直 ... -
最简单的拖拽效果
2013-01-28 16:46 769html5中提供了drag的效果, 通过事件可以进行拖拽元素, ... -
斜坡算法
2013-01-17 16:52 1435斜坡算法, 通过canvas画斜坡的算法, 知道这个算法后, ... -
如何创建一个Chrome应用
2013-01-08 15:48 0看附件的详细介绍 -
Canvas宝典
2012-12-13 15:35 689Canvas宝典, 神器!! -
CSS区分横屏和竖屏
2012-09-21 14:57 1197如何区分横屏和竖屏, 在CSS中? //竖屏 @media ... -
利用HTML5的WebGL制作的3D图形
2012-06-27 14:55 1622这里介绍一篇翻译的文章, 写的非常好, 大家可以去看看WebG ... -
KinticJs的基本用法
2012-06-11 15:42 923Kintic是html5中canvas的一个框架,效率高,包小 ... -
CSS3伪类选择器
2012-06-03 15:38 872CSS3的一个伪类选择器“:nth-child()”。 语法: ... -
canvas是如何绘画基本shape的(矩形、直线、圆弧、贝赛尔曲线)
2012-05-04 15:43 1678转载: http://www.cnblogs.com/amtf ... -
input框语音功能
2012-04-06 12:26 935Webkit内核的input框带有语音功能, 请看实例 &l ... -
-webkit-内核滚动条样式覆盖
2012-02-23 21:18 1746今天看了下Chrome的网上商城, 感觉他们的滚动条很特别. ... -
CSS3 Border-Image图片裁剪用法
2012-02-17 01:17 1524转载:http://www.zhangxinxu.com/wo ...
相关推荐
纯CSS3实现苹果设备 iPhone iPad iMac iWatch 纯CSS3实现苹果设备 iPhone iPad iMac iWatch
css3在手持设备高速发展的带动下,在网页设计者和开发者孜孜不倦的追求下不断发酵,而它对于网站的最大好处莫过于对智能手机、平板电脑等的支持,使得用户通过iphone、ipad等设备都可以访问。想为网站创建一个适用于...
JavaScript依据CSS的Media Queries来推断扫瞄设备的方法_.docx
IE8及低版本浏览器不支持CSS3 media queries的解决方法
iphone和ipad适配
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/1832739
主要介绍了CSS3 Media Queries详细介绍和使用实例,需要的朋友可以参考下
CSS3中的Media Queries经常被用来制作前端的响应式设计页面,这里整理了一份CSS3中的Media Queries学习笔记,包括IE8中的兼容问题解决,需要的朋友可以参考下
主要介绍了CSS3 media queries + jQuery实现响应式导航的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。 首先来看一个简单的实例: 复制...
在 CSS2 时代,如果你曾经为你的网站设计过打印版 CSS,就会明白 CSS3 Media Queries 的作用,不过,CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用,事实上,CSS2 的 Media Type 并不曾被多少设备所支持过。...
主要介绍了CSS3媒体查询基本学习教程,包括基本的语法和逻辑操作符,以及媒体查询可检测的特性与利用viewport禁止用户缩放等部分的内容,需要的朋友可以参考下
主要介绍了CSS3 Media Queries中媒体属性的使用,文章中还以一个响应式设计的例子作为补充讲解,需要的朋友可以参考下
这是一款使用纯css3制作的非常逼真的iPhone6动画效果。这款iPhone6动画效果中没有使用任何图片,所有的图像和动画都使用css3完成。
iPhone 6刚发布不久,今天我们就用纯CSS3来把iPhone 6的外观简单地绘制出来,记得是用纯CSS3实现的哦,没有用一张图片。由于CSS3特性的运用,整个iPhone 6手机边框带有阴影,很有立体3D的视觉效果。
Beginning iPad and iPhone Apps with HTML5 CSS3 and JAVAScript.pdf