手机版css样式
一． 宽度width:100%; 屏幕宽：320px;
二． 高度：最好不要过度长，避免用户腻烦；
三． 关于css3新特性，比如圆角，背景渐变;
圆角：border:1px solid #ccc;      /*边框的大小*/
-webkit-border-radius:10px;  /*适配chrome和safari浏览器*/
-moz-border-radius:5px;    /*适配火狐等浏览器*/
border-radius:5px;
四． 阴影效果  -moz-box-shadow:
            -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]–> 
七． LOGO部分，若图片暂无出现，用文字代替，需对文字的样式进行定义
八． 考虑鼠标触动的效果，比如导航触动的是整个li,而不是简单的a;手机上可以打html与css的app
九．Input默认有边框，记住加上：border:none;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。