1.开发移动端,头部必要的配置
viewport" content="width=device-width,initial-scale=1,user-scalable=no">(各属性值不在介绍,在开发中小米(2016年小米4)测试user-scalable=no是不起作用的)
2.rem的使用设置根节点的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-callout:none;
}
流畅滚动
body{
-webkit-overflow-scrolling:touch;
}
6.单行截取参照http://www.cnblogs.com/victory820/p/6728904.html
7.calc的使用,不考虑低版本(ie11以下安卓56以下,opera所有)兼容性,建议使用,方便。
8.box-sizing的使用,解决不同浏览器盒模型的展现不一致。(移动端常用)
content-box;默认值标准模型,width和height不包括边框内边距外边距
padding-box;width和height包括内边距不包括边框和外边距
border-box;怪异模型width和height包括内边距和边框,不包括外边距。
9.水平垂直居中(移动端常用)
缺点:需要知道小容器的宽度和高度
格式
11.vertical-align调整图标垂直居中(移动端常用)
baseline:内容与父元素基线对齐
sub:元素基线与父元素下标基线对齐
super:元素基线与父元素上标基线对齐
top:元素及其后代顶端与整行顶端对齐
text-top:元素顶端与父元素字体的顶端对齐
middel:元素中线与父元素的基线对齐
bottom:元素及其后代底端与整行的底端对齐
text-bottom:元素底端与父元素字体的底端对齐
percentage:百分比指定偏移量。基线是0%
length:数值方式,基线是0(常用)
12.flex的使用
使用flex时候,如果两列不是平均分配,试试给width设置为0
https://csstriggers.com/检查css属性触发的哪些过程
以上是移动端h5开发相关内容总结css篇的详细内容。更多信息请关注PHP中文网其他相关文章!