小型移动 webApp Demo 知识点整理
包括内容: css初始化、css全局设置、常用meat标签、rem适配、flex布局、相关技巧(手势库使用、多行截字、1像素边线、点击状态、placeholder居中等)
reset 引用
normalize.css
css全局设置 包括字体、行高、默认webkit浏览器属性重置
meta标签(禁用长按下载保存、禁止数字识别为号码等)
rem公式和sass函数(如何根据设计稿换算单位,并且写好sass函数 pxTorem) 参考, Sass基础——Rem与Px的转换
flex布局 参考腾讯isux的 移动端全兼容的flexbox速成班
单行、多行的截字
按钮active状态 白色橡树的博客中提到了 模拟按钮hover效果
手势库使用(hammerJS)
高清屏1像素边框 移动web 1像素边框 瞧瞧大公司是怎么做的
placeholder属性设置的文字向上偏移的厉害 placeholder属性设置的文字向上偏移的厉害
reset 引用
Normalize介绍 - 下载地址 浏览器支持情况:Chrome, Firefox, Opera, Safari 6+, IE 8+
Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。
css全局设置
行高字号颜色什么的就根据项目的视觉规范自己来定义,比较重要的是移动端的字体
和a链接以及表单元素
的初始化样式。
body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; } a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0;) -webkit-user-modify:read-write-plaintext-only; } input[type=number]::-webkit-textfield-decoration-container { background-color: transparent; } input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } input{-webkit-appearance:none;}
meta标签
主要是定义了比例
,苹果全屏显示
、状态条颜色、禁止数字识别为电话号码、禁止邮件识别为链接
具体根据需求增加。
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection">
rem公式和sass函数
1、页面加上js (通用代码)
2、根据公式算出数值 (设计稿宽度/320)*20
3、编写sass函数 函数中 40 就根据公式2算出来的结果 可以参考《Sass基础——Rem与Px的转换》
4、在sass 文件中 直接调用:height:px(492)
//sass 方法
@function px($px){ @return ($px/40)+rem; }
//js代码
;(function(win, doc){ function change(){ doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/320+'px'; } change(); win.addEventListener('resize', function(){ change(); }, false); })(window, document);
flex布局
网上关于flex的介绍很多,此处不再展开 参考《移动端全兼容的flexbox速成班》
/* ============================================================flex:定义布局为盒模型flex-v:盒模型垂直布局flex-1:子元素占据剩余的空间flex-align-center:子元素垂直居中flex-pack-center:子元素水平居中flex-pack-justify:子元素两端对齐兼容性:ios 4+、android 2.3+、winphone8+============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;} .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
单行、多行的截字
//单行css截字
div{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
}
//多行截字
div{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
}
按钮active状态
自己按照网上的方式做了例子,虽然都有active的效果了,但是响应速度
不一样,最快的还是js的方式。
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue-on{background-color: #357AE8;} </style> </head> <body> <div class="btn-blue">按钮</div> <script type="text/javascript"> var btnBlue = document.querySelector(".btn-blue"); btnBlue.ontouchstart = function(){ this.className = "btn-blue btn-blue-on" } btnBlue.ontouchend = function(){ this.className = "btn-blue" } </script> </body> </html>
手势库使用(hammerJS)
hammer是一个移动端是手势库, http://hammerjs.github.io/ 这是他们的官网,这些英文不是太难,利用翻译软件应该就能轻松学习,具体细节不再展开,只贴一个简单的demo代码吧。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>hammer.js</title> <style> #div{ width: 100px; height: 100px; background: red;transition:transform 1s; margin:100px auto;} </style> <script src="hammer.min.js"></script> </head> <body> <div id="div"></div> <script type="text/javascript"> var el = document.getElementById('div'); Hammer(el).on('swipeleft',function(e){ // alert('快速左滑成功'); console.log(e.deltaX); el.style.transform='translateX('+e.deltaX+'px)'; }); </script> </body> </html>
高清屏1像素边框)
实现方式很多,主要原理还是通过调整viewpor的缩放比或者将1px的元素压缩0.5来实现,移动web 1像素边框 瞧瞧大公司是怎么做的,文章写得比较详细,看完就能明白了,下边的代码是用 border-images 使用base64的图片实现的。
.border-image-1px {border-width: 1px 0px; -webkit-border-image: url("data:image/png;base64,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") 2 0 stretch; }
placeholder属性设置的文字向上偏移
在查看京东、糯米、美团等一些webapp的时候也发现有苹果和安卓不居中的情况,而且很严重,网上所设置这个属性,但是没有效果并不好,建议使用padding的形式,我抽时间研究研究其他框架后再
//placeholder属性设置的文字向上偏移的厉害 Android4.x部分机型
inpu{line-height:normal
}
移动端相关知识点汇总资料
AlloyTeam 腾讯移动Web前端知识库 《面向亿万用户级的移动端Web解决方案》
腾讯微信支付设计中心白树的博文 【原】移动web资源整理
手Q开发 Mobile开发经验沉淀
移动端开发所需要的一些资源与小技巧
参考白色橡树的移动web资源整理
转载于:https://www.cnblogs.com/sybboy/p/6211167.html
小型移动 webApp Demo 知识点整理相关推荐
- 软考高级系统分析师知识点整理
系统分析师知识点整理 信息化战略体系 企业战略规划:企业如何达到目标 信息系统战略规划:信息系统如何支撑这些目标 信息技术战略规划(IT战略规划):需要哪些信息技术支撑信息系统 信息资源规划:信息化建 ...
- 敏捷ACP 常用关键词整理 敏捷ACP 常用知识点整理
敏捷ACP 常用关键词整理 敏捷ACP 常用知识点整理 一.MoSCoW 1.MoSCoW : 读作"莫斯科",适用于故事优先级的排序,首次出现在 3-13敏捷产品实践:产品待 ...
- Java进阶3 - 易错知识点整理(待更新)
Java进阶3 - 易错知识点整理(待更新) 该章节是Java进阶2- 易错知识点整理的续篇: 在前一章节中介绍了 ORM框架,中间件相关的面试题,而在该章节中主要记录关于项目部署中间件,监控与性能优 ...
- springboot知识点整理(2021)
springboot知识点整理 参考网址 https://mp.weixin.qq.com/s/GjjxJt8OauumW_J2ps7tow Demo 脚手架项目地址: https://github. ...
- 程序员笔试知识点整理
程序员笔试知识点整理 0.常考基础必知必会 A. 排序:排序有几种,各种排序的比较,哪些排序是稳定的,快排的算法: B. 查找:哈希查找.二叉树查找.折半查找的对比,哈希映射和哈希表的区别? C. 链 ...
- Vue知识点整理(待更新)
Vue知识点整理(待更新) 参考Vue.js中文官网,Vue 知识点汇总(上)–附案例代码及项目地址,Vue 知识点汇总(下)–附案例代码及项目地址,Vue知识点汇总[持更] 文章目录 Vue知识点整 ...
- 软件工程——第1章软件工程学概述知识点整理
本专栏是博主个人笔记,主要目的是利用碎片化的时间来记忆软工知识点,特此声明! 文章目录 1.为什么要有软件工程这门学科? 2.软件分为哪些阶段? 3.软件危机的定义? 4.软件危机包含的问题有哪些? ...
- 山东大学软件学院2022-2023数据科学导论知识点整理【软工大数据课组】
每年考点变化较大,仅供参考 CSDN的排版能力有限,因此留pdf版本,祝大伙全部95+,呼呼 山东大学软件学院2022-2023数据科学导论知识点整理[软工大数据课组]-统计分析文档类资源-CSDN文 ...
- C语言考研复试知识点整理
C语言考研复试知识点整理 1.由float x=3e-6,y=3e-6;不能得到x= =y的逻辑值为真. 解析:float类型的变量只能进行>或<运算,不能进行==运算 2.自增和自减运算 ...
最新文章
- Ubuntu 18 snap 占用 100%,卸载 snap
- 使用POI导出百万级数据到excel的解决方案
- [Linux] 不带JRE版本的LumaQQ安装方法
- shell中(字符串截取)
- Android Gradle 学习笔记(四):Gradle 构建脚本
- mysql 员工工资上涨5%_工资从1万到3万,你还差mysql数据库优化之系列五
- 使用应用程序(Java/Python)访问MaxCompute Lightning进行数据开发
- android开发启动画面,Android开发笔记——如何正确实现App启动页
- 计算机电源稳压,一种用于计算机的电源稳压电路
- Linux的实际操作:用户管理(查ls -ahl,chown改文件所属者,chgrp改文件所属组,usermod改用户所属组)
- html对图片轮播脚本怎么调用,【jquery前端开发】可调整的幻灯片(图片轮播)
- php扫描目录字典,Python如何实现敏感目录扫描 Python实现敏感目录扫描代码示例...
- ICS Pwn2Own 2022迈阿密黑客大赛的目标和奖金公布
- java 调用native api_Windows和Native API中的系统调用?
- iphone中扫描wifi热点
- 直流电动机调速matlab,基于MATLAB龙门刨床直流电动机调速系统仿真研究
- access查找楼号为01_2015年计算机二级考试Access每日一练(9月19日)
- 分享8个强大的黑帽子自学网站(附:最常用的9种工具)
- 郑州财经学院第54次全国计算机,郑州财经学院第二期教师博士班开班
- 计算机工作原理与系统组成?,计算机工作原理及系统组成
热门文章
- Makefile中自定义函数的调用
- oracle存储过程写法(一)
- Linux计算求取文件长度
- [react] 请描述你对纯函数的理解?
- Taro+react开发(80):状态改变的构造函数
- [html] 你是如何区分HTML和HTML5的?
- [html] 你了解什么是无障碍web(WAI)吗?在开发过程中要怎么做呢
- [html] 说说你对<meta>标签的理解
- [css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法
- 前端学习(2738):重读vue电商网站48之通过 chainWebpack 自定义打包入口