这篇文章运用简单易懂的例子给大家介绍移动端html5开发的知识点，文章内容步步紧凑，希望大家根据这篇文章可以有所收获。
1.开发移动端，头部必要的配置
计算
安全
数据库
网络和加速
企业服务
<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设置为0
到此为止, 关于移动端html5开发的知识点有了一个基础的认识, 但是对于具体的使用方法还是需要多加巩固和练习，如果想了解更多相关内容，请关注亿速云行业资讯。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
