资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

移动端html5开发的知识点-创新互联

这篇文章运用简单易懂的例子给大家介绍移动端html5开发的知识点,文章内容步步紧凑,希望大家根据这篇文章可以有所收获。

我们提供的服务有:成都网站建设、网站设计、微信公众号开发、网站优化、网站认证、慈溪ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的慈溪网站制作公司

1.开发移动端,头部必要的配置

(各
属性
值不在介绍,在开发中小米(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.水平垂直居中(移动端常用)
缺点:需要知道小容器的宽度和高度
格式

.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开发的知识点有了一个基础的认识, 但是对于具体的使用方法还是需要多加巩固和练习,如果想了解更多相关内容,请关注创新互联网站制作公司行业资讯。


本文题目:移动端html5开发的知识点-创新互联
本文地址:http://cdkjz.cn/article/dicppg.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220