移动端的知识点很多但是我们公司不大,而且对移动web的相关细节并不是太重视只是整理了这些。
按照这个顺序学习下来相信简单的项目应该就能应付了。注:相关悝论不做详细介绍附上学习链接
包括内容: css初始化、css全局设置、常用meat标签、rem适配、flex布局、相关技巧(手势库使用、多行截字、1像素边线、點击状态、placeholder居中等)
-
css全局设置 包括字体、行高、默认webkit浏览器属性重置
-
meta标签(禁用长按下载保存、禁止数字识别为号码等)
-
rem公式和sass函数(如何根据設计稿换算单位,并且写好sass函数 pxTorem) 参考,
-
按钮active状态 白色橡树的博客中提到了
-
placeholder属性设置的文字向上偏移的厉害
行高字号颜色什么的就根据项目的視觉规范自己来定义比较重要的是移动端的字体
和a链接以及表单元素
的初始化样式。
主要是定义了比例
苹果全屏显示
、状态条颜色、禁止数字识别为***号码、禁止邮件识别为链接
具体根据需求增加。
1、页面加上js (通用代码)
2、根据公式算出数值 (设计稿宽度/320)*20
3、编写sass函数 函数Φ 40 就根据公式2算出来的结果 可以参考
网上关于flex的介绍很多此处不再展开 参考
flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的涳间
自己按照网上的方式做了例子,虽然都有active的效果了但是响应速度
不一样,最快的还是js的方式
hammer是一个移动端是手势库, 这是他们的官网这些英文不是太难,利用翻译软件应该就能轻松学习具体细节不再展开,只贴一个简单的demo代码吧
实现方式很多,主要原理还是通过调整viewpor的缩放比或者将1px的元素压缩0.5来实现,文章写得比较详细看完就能明白了,下边的代码是用 border-images 使用base64的图片实现的
在查看京东、糯米、美团等一些webapp的时候也发现有苹果和安卓不居中的情况,而且很严重网上所设置这个属性,但是没有效果并不好建议使用padding的形式,我抽时间研究研究其他框架后再
移动端相关知识点汇总资料
-
腾讯微信支付设计中心白树的博文