• HTML/CSS

    触屏开发适配的CSS总结

    by on 2013年05月15日
/* 适配不同屏幕分辨率 --------------------------------------------- */
@media only
screen
and (min-resolution:
300
dpi),
only
screen
and (-webkit-min-device-pixel-ratio:
2
),
/* 像素密度,默认是1,iPhone 4和new iPad和部分Andriod等高清屏是2,也有部分Android设备为1.5 */
only
screen
and (min--moz-device-pixel-ratio:
2
),
only
screen
and (min-device-pixel-ratio:
2
) {
 
h
1
a:link, h
1
a:visited, h
1
a:hover, h
1
a:active, h
1
a:focus {
 
background-
size
:
235px
48px
;
/* 把高清尺寸的图片强制缩到正常尺寸 */
 
background
:
transparent
url
(
"../images/miniappslogo_highres.png"
);
 
}
}
/* 适配不同屏幕尺寸 --------------------------------------------- */
@media only
screen
and (
min-width
:
651px
) and (
max-width
:
1024px
),
only
screen
and (min-device-
width
:
768px
) and (max-device-
width
:
1024px
) {
header[role=
"banner"
], article, footer[role=
"contentinfo"
] {
 
min-width
: inherit;
 
max-width
: inherit;
 
margin-left
:
0
;
 
margin-right
:
0
;
 
-webkit-tap-highlight-
color
:rgba(
0
,
0
,
0
,
0
);
/* 去掉点击链接和文本框对象的半透明覆盖层(iOS)或者虚框(Android) */
 
-webkit-touch-callout:
none
;
/* 禁用长按页面时的弹出菜单(iOS下有效) */
 
-webkit-text-size-adjust:
none
;
/* 禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化) */
 
-webkit-user-select:
none
;
/* 禁止页面文字选择 */
 
-<a rel="nofollow" href="http://webkit-overflow-scrollingtouch/">webkit-overflow-scrolling:touch</a>;
/* 局部滚动(仅iOS 5以上支持) */
 
-webkit-box-sizing: border-box;
/* 翻转盒模型(width定义变为包含padding border-width,不含margin) */
}
input[type=
"text"
]
,input[type=
"tel"
]
,input[type=
"search"
]
,input[type=
"email"
]
,input[type=
"password"
]
,textarea
{
 
outline
:
none
;
 
padding
:
9px
;
 
-webkit-box-shadow:
inset
#bbb
0
1px
3px
/* 内阴影 */
,
#fff
1px
1px
0
/* 外阴影*/
;
/* 可以叠加多个阴影,用逗号分隔 */
 
-webkit-border-radius:
5px
;
 
-webkit-appearance:
none
;
/* 消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式 */
}
/* 按钮 */
input[type=
"submit"
],
input[type=
"button"
],
button{
 
background
: -webkit-gradient(
 
linear,
 
0
0
,
 
0
100%
,
 
from(
#0071D0
),
 
to(
#005EAC
)
 
);
 
color
:
#fff
;
 
border
:
1px
solid
#065392
;
 
width
:
120px
;
 
-webkit-appearance:
none
;
/* 消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式 */
 
-webkit-border-radius:
5px
;
 
-webkit-box-shadow:
inset
rgba(
255
,
255
,
255
, .
3
)
0
1px
0
, rgba(
0
,
0
,
0
, .
2
)
0
1px
0
;
}
/* MEDIA QUERY --------------------------------------------- */
@media (orientation:
portrait
) { ... }
/* 竖屏状态下的样式 */
@media
all
and (orientation:
portrait
) { ... }
@media
all
and (orientation:
landscape
) { ... }
/* 横屏状态下的样式 */
/* Safari的CSS文档 */
/* <a rel="nofollow" href="https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/(null)-SW1">https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/(null)-SW1</a> */