移动Web开发小结

以下是做移动端Web开发过程中小结的几个事项:希望能够帮助到大家，同时也方便自己查看：

1，在移动开发页面中，主体盒子的max-width与min-width的设置原因:

①设置max-width是为了不让盒子无限放大，以至内容显示不清，界面不友好

②设置min-width设置最小限制，以便于更好的布局

2，position:fixed;  这个属性是以window最外层容器计算

3，去除图片默认下边距的几种方法:

①在图片父容器中设置 font-size: 0;

②给图片设置 display: block;

③给图片设置 vertical-align: middle;

4，使块级元素在移动端水平居中的方法:

width: 100px; left: 50%; margin-left: -50px;

解释:设置一块级级元素宽度后，设置left:50%;此时此块级元素的位置是以最左边位置来计算居中；

再设置margin-left: -50px; 让块级元素的左边距设置为-50px;即让块级元素左移宽度的一半的位置

这样就实现了居中的效果

5，移动端box-shadow的使用说明:

在Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，需要将属性的名称写成-webkit-box-shadow

Firefox浏览器则需要写成-moz-box-shadow的形式

6，这里还补充几种转块方式:

①position:absolute;  将定位设置为绝对定位可以实现转块，使用此属性时要牢记将父级容器的定位设置为相对定位(relative)

②float:left;  设置浮动也可以实现转块，使用此属性时要牢记有了浮动就要清除浮动，清除浮动方式详见:http://www.cnblogs.com/wccc/p/6749692.html

③display:block;  这是最常见的转块方式

7，of-type用法归纳:

①E:first-of-type:选择E同类型的同级的 第一个元素;

②E:last-of-type:选择E同类型的同级的 最后一个元素;

③E:nth-of-type(n):选择E同类型的同级的 第n个元素;

8，移动端form的使用:

将<input type="search">包含在form标签内，可实现将移动端小键盘enter改变成搜索按钮的功能

这里顺带说一下 -webkit-appearance:cone;  清除移动端默认的表单样式

9，有关组合样式或多个复杂样式的设置要有模块化的思想，将复杂问题简单化，便于管理

10，移动端viewport设置:<mata name="viewport" content="width=device-width,initial-scale=1.0"/>

①设置宽度:将宽度设置为跟设备宽度(width=device-width)

②设置默认的缩放比:initial-scale=1.0(缩放比为1.0)

③设置是否允许用户缩放:user-scalable=0/no(不允许缩放);1/yes是允许缩放

④maximum-scale:最大缩放比

⑤minimum-scale:最小缩放比

注意:viewport非标准缩放比:将body宽度设置为设备宽度的两倍，然后将缩放比设置为0.5，是为了显示的更清晰,界面更友好

11，移动端去除点击高亮效果:

-webkit-tap-highlight-color:transparent;

12，移动端盒子尺寸设置:

box-sizing:border-box;  以边框计算宽度，不设置的话边框会溢出屏幕

-webkit-box-sizing:border-box;  //兼容处理

13，移动端字体设置:

font-family:sans-serif;  设备默认字体

在移动端设置字体后，一般都会加入上述属性，因为移动端设备的字体库可能不包含开发者所设置的字体

因此在没有所设字体的情况下，会使用设备默认字体

  //以上就是做移动端Web开发过程中的事项，当然，项目不同，设置的东西也会有所不同。根据需要各取所需，后续会有补充，感兴趣的可以加关注!

作者：一小白

出处：http://www.cnblogs.com/wccc/


本文版权归作者和博客园共有，欢迎转载，但未经本人同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。