一. 宽度width:100%; 屏幕宽:320px;
二. 高度:最好不要过度长,避免用户腻烦;
ie9浏览器手机版圆角:border:1px solid #ccc; /*边框的大小*/
-webkit-border-radius:10px; /*适配chrome和safari浏览器*/
-moz-border-radius:5px; /*适配火狐等浏览器*/
border-radius:5px;
-webkit-box-shadow:
box-shadow:
五. 渐变效果background:-moz-linear-gradient(top,#FC9A2F,#F37802); /*火狐等浏览器*/
background:-webkit-gradient(linear, left top, left bottom, from(#FC9A2F), to(#F37802)); /* chrome和safari浏览器*/
filter:progid:adient(startColorstr='#ffffff', endColorstr='#ff0000'); /*IE6/7*/
-ms-filter:"progid:adient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */
六. ie9中引入新的web标准支持,确保页面顶部:<!DOCTYPE html>(如:淘宝手机版)-ms(microsoft)为ie前缀
七.针对iPad与iPhone的样式区分:
< link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> // 纵向排版样式
< link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”> // 横向排版样式
<!–[if !IE]>–>
<link type=“text/css” rel=“stylesheet” media=“only screen and (max-device-width: 480px)” href=“belary/iPhone.css” />
<link type=“text/css” rel=“stylesheet” media=“only screen and (min-device-width: 768px) and (max-device-width: 1024px)” href=“belary/iPad.css” />
<!–<![endif]–>
八. 考虑鼠标触动的效果,比如导航触动的是整个li,而不是简单的a;
九.Input默认有边框,记住加上:border:none;
发布评论