小型移动 webApp Demo 知识点整理

时间：2022-03-14 17:05:17

包括内容: css初始化、css全局设置、常用meat标签、rem适配、flex布局、相关技巧（手势库使用、多行截字、1像素边线、点击状态、placeholder居中等）

  1. reset 引用 normalize.css

  2. css全局设置 包括字体、行高、默认webkit浏览器属性重置

  3. meta标签(禁用长按下载保存、禁止数字识别为号码等)

  4. rem公式和sass函数(如何根据设计稿换算单位，并且写好sass函数 pxTorem) 参考, Sass基础——Rem与Px的转换

  5. flex布局 参考腾讯isux的 移动端全兼容的flexbox速成班

  6. 单行、多行的截字

  7. 按钮active状态 白色橡树的博客中提到了 模拟按钮hover效果

  8. 手势库使用（hammerJS）

  9. 高清屏1像素边框 移动web 1像素边框 瞧瞧大公司是怎么做的

  10. 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,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAcSURBVHjaBMEBDQAADMMgckv1r20H1WxzoNoPAER9BjAKc4kUAAAAAElFTkSuQmCC") 2 0 stretch;

}

placeholder属性设置的文字向上偏移

在查看京东、糯米、美团等一些webapp的时候也发现有苹果和安卓不居中的情况，而且很严重，网上所设置这个属性，但是没有效果并不好，建议使用padding的形式，我抽时间研究研究其他框架后再

//placeholder属性设置的文字向上偏移的厉害    Android4.x部分机型

inpu{

    line-height:normal

}

移动端相关知识点汇总资料

小型移动 webApp Demo 知识点整理的更多相关文章

  1. Flutter教程- Dart语言规范-知识点整理

    Flutter教程- Dart语言知识点整理 Dart语言简介 Dart语言介绍 ① 注释的方式 ② 变量的声明 ③ 字符串的声明和使用 ④ 集合变量的声明 ⑤ 数字的处理 ⑥ 循环的格式 ⑦ 抛异常 ...

  2. 转：基于开源项目OpenCV的人脸识别Demo版整理（不仅可以识别人脸，还可以识别眼睛鼻子嘴等）【模式识别中的翘楚】

    文章来自于:http://blog.renren.com/share/246648717/8171467499 基于开源项目OpenCV的人脸识别Demo版整理(不仅可以识别人脸,还可以识别眼睛鼻子嘴 ...

  3. ACM个人零散知识点整理

    ACM个人零散知识点整理 杂项: 1.输入输出外挂 //读入优化 int 整数 inline int read(){ int x=0,f=1; char ch=getchar(); while(ch& ...

  4. Android 零散知识点整理

    Android 零散知识点整理 为什么Android的更新试图操作必须在主线程中进行? 这是因为Android系统中的视图组件并不是线程安全的.通常应该让主线程负责创建.显示和更新UI,启动子线程,停 ...

  5. vue前端面试题知识点整理

    vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  6. kafka知识点整理总结

    kafka知识点整理总结 只不过是敷衍 2017-11-22 21:39:59 kafka知识点整理总结,以备不时之需. 为什么要使用消息系统: 解耦 并行 异步通信:想向队列中放入多少消息就放多少, ...

  7. JSP页面开发知识点整理

    刚学JSP页面开发,把知识点整理一下. ----------------------------------------------------------------------- JSP语法htt ...

  8. JS知识点整理&lpar;二&rpar;

    前言 这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...

  9. css入门知识点整理

    css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...

随机推荐

  1. Python强化训练笔记&lpar;二&rpar;——元组元素的命名

    对于一个元组如: >>> s1 = ('Jim', 21, 'boy', '5788236@qq.com') 我们要得到该对象的名字,年龄,性别及邮箱的方法为s1[0],s1[1], ...

  2. Nodejs路由之间的数据传递

    实例是模拟登录页面提交表单,然后根据信息判断是否登录成功 login.js var express =require('express'); var router =express.Router(); ...

  3. 转：C的&vert;、&vert;&vert;、&amp&semi;、&amp&semi;&amp&semi;、异或、~、！运算

    转自:C的|.||.&.&&.异或.~.!运算 位运算     位运算的运算分量只能是整型或字符型数据,位运算把运算对象看作是由二进位组成的位串信息,按位完成指定的运算,得到位 ...

  4. 让层遮挡select（ie6下的问题）

    虽然现在很多比较大的网站已经不考虑ie6了,不过这些方法,或者其中原理还是值得记录下来的.所以整理的时候,把这篇文章留下了. <script language="javascript& ...

  5. Linux系统各发行版镜像下载

    Linux系统各发行版镜像下载(2014年10月更新),如果直接下载不了,请使用迅雷下载.并且注意,我的下载地址,在 迅雷 里才起作用. 包括Ubuntu,Fedora,SUSE,Red Hat En ...

  6. 文件下载，带转码-&amp&semi;gt&semi;pdf-&amp&semi;gt&semi;swf

    private String upload = "保存的路径"; //文件下载 public String download() { //初始化 this.initContext( ...

  7. Net FLow Template

    EK  Template : bool bfs(int src, int des){ memset(pre, -, sizeof(pre)); while(!que.empty()) que.pop( ...

  8. Linux 下安装配置 JDK1&period;7

    目录[-] 1.下载JDK 2.解压安装 3.配置环境变量 4.配置默认JDK(一般情况下这一步都可以省略) 5.测试 1.下载JDK Linux操作系统是:Centos6.5-x64 目前最新的JD ...

  9. WebSocket&plus;MSE——HTML5 直播技术解析

    作者 | 刘博(又拍云多媒体开发工程师) 当前为了满足比较火热的移动 Web 端直播需求,一系列的 HTML5 直播技术迅速的发展起来. 常见的可用于 HTML5 的直播技术有 HLS.WebSock ...

  10. 《团队-Oldnote-最终程序》

    托管平台地址:https://github.com/Vcandoit/Notepad 小组名称:TOP 小组成员合照:待添加 程序运行方法:手机app,安装到手机点击即可运行,打开页面会有图标提示. ...

相关文章