关于移动端h5开发相关内容总结

<meta name="  viewport  " content="  width  =device-width,initial-scale=1,user-  scala  ble=no">（各  属性  值不在介绍，在开发中小米（2016年小米4）测试user-scalable=no是不起作用的）

font-size,开发过程中是用Js计算的。公式 320/100=屏幕尺寸/fontSize值3.需要点击跳转，语义标签是a（dispaly:block;）在语义化考虑的情况下a标签中添加一个span(disply:block)，span中在添加容器4.为了用户友好体验，在开发移动端页面时候设置最大宽度和最小宽度。如

{     max-width  :640px;     min-width  :320px;  }

5.移动端开发页面一些默认样式禁止a标签背景

a,button,input,optgroup,select,textare{   // 去掉a,input,button点击时蓝色外边框和灰色半透明   -webkit-tap-highlight-color:rgba(0,0,0,0);  }

禁止长按a,img标签出现菜单栏

a,img{   // 禁止长按显示菜单栏   -webkit-touch-c  all  out:none;  }  流畅滚动  body{   -webkit-  overflow  -scrolling:touch;  }

6.单行截取

7.calc的使用，不考虑低版本（ie11以下安卓56以下，opera所有）兼容性，建议使用，方便。

8.box-sizing的使用，解决不同浏览器盒模型的展现不一致。（移动端常用）content-box;默认值标准模型，width和height不包括边框内边距外边距padding-box;width和height包括内边距不包括边框和外边距border-box;怪异模型width和height包括内边距和边框，不包括外边距。

9.水平垂直居中（移动端常用）缺点：需要知道小容器的宽度和高度格式

<p class="parent">   <p class="child"></p>  </p>  .parent{     position  :relative;   width:100px;   height:100px;     background-color  :red;  }  // 注意是四个方向都是0  .child{   position:absolute;     margin  :auto;     top  :0;     right  ;0;     bottom  :0;     left  :0;   width:50px;   height:50px;   background-color:gold;  }

10.line-height的设置（移动端常用）normal:默认，自动分配合理的行间距number设置数字，会与当前字体尺寸相乘来设置，即倍数length设置固定行间距%基于当前字体尺寸的百分比行间距inherit从父元素继承过来记住下面公式，利用排除Bug空白间距=lineHeight - fontSize设置父元素的line-height为100%就可以没有留白

11.vertical-align调整图标垂直居中（移动端常用）baseline:内容与父元素基线对齐sub:元素基线与父元素下标基线对齐super:元素基线与父元素上标基线对齐top:元素及其后代顶端与整行顶端对齐text-top:元素顶端与父元素字体的顶端对齐middel:元素中线与父元素的基线对齐bottom:元素及其后代底端与整行的底端对齐text-bottom:元素底端与父元素字体的底端对齐percentage:百分比指定偏移量。基线是0%length:数值方式，基线是0（常用）

12.flex的使用使用flex时候，如果两列不是平均分配，试试给width设置为0https://csstriggers.com/检查css属性触发的哪些过程

以上就是关于移动端h5开发相关内容总结的详细内容，更多内容请关注技术你好其它相关文章！