移动端制作的基本要求-20131208

首先在制作的手机端的时候需要注意到的

1、手机端的几点要求，首先在制作手机端的页面的时候端独要注意，图片要注意，还在背景图片的属性，间距要注意，字体大小的问题和功能点引入的包。

2、页面的宽度，手机现在最大的宽度是640px，所以在制作的时候首先要把所有的内容都居中，然后定义居中的宽度，但是页面的宽度不能定到640要定到320，这是因为最大的宽度手机已经帮我们定好了，那我们要做的就是定义最小的宽度，最小的宽度是最大宽度的除2就是320，现在要兼容的页面最小的宽度就是320了那么长度是不需要定义的因为大部分的页面都是需要下拉的，所以默认的100%是基本没有问题的，除非有些特殊的要求需要去做的才要在特殊的定义。

3、下面就是图片的制作，基本上手机端的视觉稿都是按照640的来做的特殊的会告诉我们现在接看下就是切图的程序，图片还是一样按照原来的640的尺寸来切图，因为好个是显示最大以后的效果，切好以后放入页面当中，这个时候所有的图片都是要在页面中再次定义他的长度和宽度的这个时候就要所有的图片的宽度和长度全部除2这是时候显示出来的是除2以后的效果图片在页面上展示出的，这个是为了兼容手机端的最小图片的效果，意思就是现在出来的是最小图片，在用户发大后开始开始出大图片而图片不会变样，让展示到640的图片以后就不能在方法，这个时候展示出来的就是视觉稿的效果图片了

4、在图片的里面有分图片和背景图片之分，这个时候在手机端的背景图片上也是有的特殊的要求的，那么就是在所有的背景图片的属性上面除了常规的定义以外还有另外在加上一个属性那么就是background-size:100%; 这个意思就是（指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度）就是做这个图片图片可以被拉伸到100%的宽度和它的高度起到在手机端拉伸的时候背景图不会应为拉伸过大而破图

5、定义之间的间距，好个间距就不能按照视觉稿上来的定义了，因为你写在页面里面的所有内容都是按照视觉稿除2的标准来做的，但是边距不是绝度的，在这里告诉大家一个小窍门那么就是在火狐下进行调试，因为手机端页面上线手，和游览器间距误差最小的就是火狐了，其他的游览器误差都是比较大的，特别是谷歌，这个后面一个就会就会讲到

6、字体大小的问题，因为是手机端所以字体肯定不是能用正常页面的来做，那么字号要怎么来呢，一般来所手机端的字体定义一般都是按照12、10、8这三个字码来定的，因为这三个字码算的上是手机端的中庸字码，不会太大也不会太小，现在就说到了为什么在谷歌下边距会出大问题，就是谷歌的游览器的字体兼容只兼容到最小字体的12号，这样就出来了一个很大的问题，就是12号在手机端算的很大的字体了，这个时候要就会有麻烦， 所有建议用火狐，火狐可以很好的兼容这三种字体和调整他们的间距

7、这个是比较特殊的就是在我公司制作手机端的时候是需要引入包的这个包的功能是随着你页面的有多少功能来定的，比如说分享、关注、kissy，还有手机自己的样式包，都是需要引入的还有购物车等等功能，因为在tms上没有统一的支持，所以这个时候就需要我们自己来引入这些功能包来达到他们的需求

下面是学习的到的

手机端的选择器可以支持和不能支持的属性

1、首先是可以支持的

全局选择器(*)

这样写一般是要 边距 和内间距都定义为0 margin:0; padding:0;

子选择器(p>span)

这里是说可以用过父类来找到他的子类 .11 p p是子类

链接伪类 (:link,:visited)

这里讲的link鼠标触及到链接时候的样子和visited读取完链接的样子

动态伪类(:active, :focus)

active在鼠标点击后放开这个之间的样子和focus鼠标移开后的样子

id选择器、分组(h1,h2,h3{}…)

这个写法一般是同级的class或者是id

<div class="ss">

</div>

<div class="aa">

</div>

<div class="dd">

</div>

.ss,.aa,.dd一般是为了优化代码统一样式的时候才这么写的

2、不支持的

:first-child

伪类向元素的第一个子元素添加样式

:hover

伪类在鼠标移到元素上时向此元素添加特殊的样式

:lang()

伪类向带有指定 lang 属性的元素添加样式

:first-letter

伪元素向文本的第一个字母添加特殊样式

:first-line

伪元素向文本的首行添加特殊样式

3、背景和边框是全都兼容的

background

简写属性在一个声明中设置所有的背景属性

background-color

定义背景的颜色

background-image

定义背景的外边距

background-repeat

设置是否及如何重复背景图像

background-attachment

属性设置背景图像是否固定或者随着页面的其余部分滚动

background-position

属性设置背景图像的起始位置就像我们定义选择器一样的

border

简写属性在一个设置所有的边框属性

border-width

为元素的所有边框设置宽度，或者单独地为各边边框设置宽度

border-color

设定所有边框的的颜色

border-style

定义所有边框的样式

4、定位是全部兼容的

position

属性规定元素的定位类型

top

定义它的距高

right

定义它的距右

bottom

定义它的距下

left

定义它的距左

z-index

定义它的层级

列表也是全部兼容

list-style

定义当中所有的列表属性

list-style-image

定义列表的外边据

list-style-type

属性设置列表项标记的类型

5、字体

font

定义当中设置所有字体属性

font-family

规定元素的字体系列

font-style

定义字体的风格

font-variant

属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写

font-weight

属性设置文本的粗细

font-size

定义字体的尺寸

6、文字

text-indent

定义规定文本块中首行文本的缩进

text-align

定义规定元素中的文本的水平对齐方式

text-decoration

添加到文本的修饰这个属性我几乎没用过其实就是有点像del标签这个中间有一横线的标签，一般这个标签的用处是原价多少这个原价中间一个横线，那么这个属性就是可以定义这个横线上中下

h1 {text-decoration: overline}
/*上*/
h2 {text-decoration: line-through}
/*中*/
h3 {text-decoration: underline}
/*下*/
h4 {text-decoration:blink}
/*要是有横线办隐藏了的话用这个属性可以从新展示出来*/
a {text-decoration: none}
/*当你不要横线的时候隐藏*/

text-transform

控制文本的大小写