移动端开发的注意事项

一 meta标签的使用

1.强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

width=device-width:宽度等于当前设备的宽度
intial-scale:页面首次被显示是可视区域的缩放比例，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放

2.忽略页面中的数字识别为电话号码

3.忽略页面中的邮箱格式为邮箱

4.

二 关于单位的使用

用来适应不同的移动端屏幕尺寸；
Px像素。类似绝对单位。其实也是相对单位，相对于屏幕的分辨率；
Pt磅 点 打印的尺寸
Em 相对单位，相对于父级的font-size 1em=父级的font-size（直接的父级）
Rem相对单位，相对于根元素的font-size 1rem=根元素的font-size
Vw，vh相对单位，相对于屏幕的宽度和高度，1vw==1%屏幕的宽度

三 Js方法获取HTMLfontsize

1.手动刷新

2.自动刷新

四 HTML5标签的使用

在开始编写webapp时，建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

五 自适应布局模式

在编写CSS时，使用自适应布局模式，因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。

六 响应式布局

响应式布局就是使用媒体查询的方式，通过查询浏览器的宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局，响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

• 什么是响应式？
  集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
  响应式网站布局的依据是：媒体查询
• 什么是媒体查询？
  可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
  怎样在CSS文件中写CSS响应式媒体查询

@media screen and (max-width:720px) and (min-width:320px)
{     body{
      background-color:red; 
  }  @media screen and (max-width:320px){
     body{
    background-color:blue; 
  } 
 }

七 弹性盒模型布局

Flex是flexinle Box的缩写，意思是弹性布局；用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。即：display：flex；
注：设置了flex布局后当前容器内子元素的float、clear、vertical-align属性将全部消失

• 确定子元素排列的方向: flex-direction:row | row-reverse|column|column-reserve

 flex-direction:row 默认子元素水平靠左排列
flex-direction:row-reverse  子元素靠右倒序排列，类似于右浮动
 flex-direction:column   竖排
flex-direction:column-reverse  倒序竖排

• 元素超过父容器尺寸时是否换行: flex-wrap:nowrap|wrap|wrap-reverse

flex-wrap:nowrap； 子元素宽度超过父级宽度时，默认不换行  
flex-wrap:wrap； 子元素宽度超过父级宽度时，换行
flex-wrap:wrap-reserve； 子元素宽度超过父级宽度时，倒序换行 

• 子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式：justify-content:flex-start | flex-end | center | space-between | space-around

justify-content:flex-start  整体子元素靠左
justify-content:flex-end  整体子元素靠右
justify-content:center  整体子元素居中
justify-content:space-between  第一个子元素靠左顶格，最后一个子元素靠右顶格，中间子元素均分距离
justify-content:space-around  第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半，中间的元素等分间距。

• 子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式：align-items:flex-start | flex-end | center | baseline | stretch

align-items:flex-start  整体垂直靠上排列
align-items:flex-end  整体垂直靠下排列
align-items:center  整体子元素垂直居中（也可以使用margin或padding或定位来实现）
align-items:baseline  子元素内的文字底部对齐，如果文字大小不同，会导致子元素底部不对齐
align-items:stretch  如果子元素不设置高度，高度会被拉伸到和父元素高度相同（除去自身的margin）

• 设置多行子元素在行方向上的对齐方式：align-content : flex-start | flex-end | center | space-between | space-between | space-around | stretch

align-content : flex-start  多行整体靠上排列
align-content : flex-end 多行整体靠下排列
align-content :center 多行整体居中排列
align-content:space-between  第一行子元素靠上顶格，最后一行子元素靠下顶格，中间行子元素等分垂直的间距