一、如何执行CSS

1. 针对旧款移动设备：

   <link rel="stylesheet" href="site.css" media="screen" />

   <link rel="stylesheet" href="mobile.css" media="handheld" />

2. 针对新型移动设备：
   

   Step1: 创建一个名为core.css的文件，内容为：

   @import url("screen.css");

   @import url("antiscreen.css") handheld;

   @import url("antiscreen.css") only screen and (max-device-width:480px);

   Step2:

   @import url("antiscreen.css") only screen and (max-device-width:480px);

    

二、移动页面CSS设计注意事项

1. 将页面设计为单栏
2. 将没用的内容设置为“display: none”
3. 减少空白边（padding和margin）的数值，以求页面的紧凑度
4. 移除较大的背景图片，特别是作为整个网站的背景图片
5. 将没用的文章内容图片设置为“display: none”
6. 如果网站使用图片作为按钮或者导航，将其设置为文字形式
7. 如果需要强制浏览器使用替代文字（alt-attributes）来显示图片，可以使用如下语句（注意，需要同时使用JavaScript为所有img标签添加“as-text”class值）：

   img.as-text { content: attr(alt); }

8. 对于过小的字体要增大其字号以方便阅读
9. 对于一些重要按钮的可点击区域，一定要设置成“display: block”，并且为可点击的区域添加空白边值（padding）
10. 移除不必要的浮动设置（float）
11. 将“:hover“属性修改成“:active”，因为大多数移动设备并不识别“:hover“属性

三、除了CSS以外的设计技巧

1. 可点击的电话号码

   <a class="phone-link" href="tel:15032084566">(503) 208-4566</a>

   其中“tel:15032084566”中的1是国家区号。

2. 特殊的输入方式：HTML5的input格式

   <input type="tel" />

   <input type="email" />

   

   对于诸如iPhone这样的移动设备来说，“input type”可以自动弹出对应的输入键盘。比如

   <input type="tel" />

   可以弹出数字键盘，

   <input type="email" />

   可以弹出带有@和.符号的键盘

3. 可视尺寸和方向判定
   

   可视尺寸：

   <input type="email" />

   （宽度为320px，可以等比例变换）

   <input type="email" />

   （宽度为320px，不可以等比例变换）

   方向判定：

    @import url("portrait.css") all and (orientation:portrait);

    @import url("portrait.css") all and (orientation:portrait);

   当然，并非所有的移动设备都能识别以上操作方式，因此还可以使用max-width属性。

四、针对iPhone和iPad的几点说明

1. 不要使用flash
2. iPhone不支持

   <input type="“file”" />

3. iPhone仅支持小于25kb的缓存
4. iPhone不能完好的支持“@font-face”属性，而对SVG文件格式有很好的支持，因此CSS需要写成日如下的形式：

   @font-face {

   font-family: 'Comfortaa Regular';

   src: url('Comfortaa.eot');

   src: local('Comfortaa Regular'),

   local('Comfortaa'),

   url('Comfortaa.ttf') format('truetype'),

   url('Comfortaa.svg#font') format('svg');

   }

   其中.otf用来支持Firefox和Safari，EOT用来支持IE。

5. 针对iPhone/iPad的增强应用：1) 多种针对iPhone界面特效的Javascript库：Sencha Touch, jQTouch和iui，以上也适用于Android系统2) 创建特殊的iPhone ICON：其中png的图片尺寸为57X57像素