移动端小常识

                                                                                                                                                                    移动端复习

一、下面我将简单的介绍移动端布局的八种方式：
** 1.固定布局**
2.流动布局
3.浮动布局
4.定位布局
5.混合布局
6.flex布局
7.rem布局
8.响应式布局
** 9.****圣杯布局**
** 10.****双飞翼布局**

1.固定布局 方法 <head>里把<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">加好，然后根据设计稿设定相应的宽度即可，其他地方类似于pc端。 优点 思路沿用pc端，上手比较快 缺点
大屏手机显示网页比较宽，而固定布局宽度参照永远是固定的宽度（设计稿的大小），导致左右两边会有空白。手机横屏的时候两边空白更亮。

2.流动布局
方法
适用百分比(%)做单位。
优点 能更很好的适应各个屏幕分辨率的手机。 缺点
不够灵活，添加元素时，需要更改其他元素的值。

3.浮动布局 方法
float+clearfix(清除浮动)
/--不需兼容老版本--/
.clearfix:after{
content:"";
display:block;
clear:both;
}
--需要兼容老版本--/
clearfix:after{
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}

**优点**        这是传统的浮动方式，写法简单，实现效果起来干脆利落    **缺点**
    对浮动元素要求比较严格，布局也不太灵活

4.定位布局 方法 在布局当中很常用，利用position+四个方位的具体值（top/left/right/bottom）相互配合，实现起来也比较容易 优点
实现简单，在移动端中，定位很常用，尤其是弹窗，
.mask{
position:fixed;
left:50%;
top:50%;
-webkit-transform:translate3d(-50%,-50%,0);
transform:translate3d(-50%,-50%,0);
}
缺点
移动端中频繁的使用定位，会出现一些莫名的bug;
fixed+input在ios上存在bug,会出现使用fixed布局的元素乱掉。在android手机上当input框获取焦点时，换气键盘，会出现定位的元素被抬升至手机键盘的上方。（了解）

5.混合布局 方法 所谓混合布局，就是把所有学到的知识灵活运用在布局中。例如：rem+百分比(流动布局) flex+rem等 优点 布局灵活，集合其他布局的优势达到自己的布局要求 缺点
代码有点累赘；代码不统一，维护困难

6.flex布局(重点)
方法
也叫弹性布局。
/--只需父元素设置--/
{
display:-webkit-box; /android2.1-3.0 ios 3.2-4.3/
display:-moz-box; /firefox/
display:-webkit-flex; /chrome 21+/
display:-ms-flexbox; /wp ie 10/
display:flex; /android 4.4/
}
/--然后子元素设置相应的比例--/
{
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
}

这个是最简单的flex布局了，其实弹性布局里面还有很多简单高效实用的属性，很方便移动端的布局。     **优点**        自适应很好，灵活性很强，目前在移动端应用的还是比较广泛。     **缺点**
    需要写很多兼容代码。

7.rem布局 方法 rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的font-size大小就可以控制rem的大小。有以下两种适配方式：
1.rem+@media(通过媒体查询设置html的font-size值，达到自适应)
html{
-webkit-text-size-adjust:none;
font-size:10px;
}
@media screen and (min-width:321px) and (max-width:375px){
html{
font-size:10px;
}
}
@media screen and (min-width:376px) and (max-width:414px){
html{
font-size:10.25px;
}
}
@media screen and (min-width:415px) and (max-width:454px){
html{
font-size:10.5px;
}
}
@media screen and (min-width:455px) and (max-width:554px){
html{
font-size:10.75px;
}
}
@media screen and (min-width:455px){
html{
font-size:11px;
}
}

2.rem+js（通过js自动获取设备宽度，计算得到相应设备下html的font-size值达到自适应）（了解）

!function(n) {
var e = n.document,
t = e.documentElement,
i = 720,
d = i / 100,
o = "orientationchange" in n ? "orientationchange": "resize",
a = function() {
var n = t.clientWidth || 320;
n > 720 && (n = 720),
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);

优点 在任何设备下都可以达到完全适配，页面布局样式完全自适应 缺点
rem+@media这种方式不能所有设备全适配

8.响应式布局 方法 使用@media(媒体查询)设置页面在不同的屏幕宽度下达到自适应以及响应式（根据不同屏幕大小，页面布局，样式会做出相应的调整）典型案例（bootStrap官网） 优点 不仅在不同的屏幕下达到自适应，还会在相应的屏幕下对页面布局，样式做出相应的调整，达到更加的用户体验 缺点
兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间过长；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况；增加UI和开发的工作量。

9.圣杯布局
利用float来实现，首先将三列放到一个父元素内后左浮动，之后给左右中分别设置宽度200px,250px,100%。
之后给中间，右边分别设置margin-left为-200px,-250px。之后再将左右两列进行相对定位position：relative;并分别设置left:-200px;right:-250px;最后便是等高布局了，给左中右设置padding-bottom:2000px;margin-bottom:-2000px;给其父元素设置overflow:hidden即可。
[图片上传中。。。（1）]

10.双飞翼布局
用float来实现，首先将左中右分别设置宽度为200px,100%,250px。中右分别设置margin-left为-200px和-250px.中间元素下有一个子元素，设置margin-left和margin-right分别为200px余250px。最后便是等高布局了，给左中右设置padding-bottom:2000px;margin-bottom:-2000px;给其父元素设置overflow:hidden即可。
[图片上传中。。。（2）]

[图片上传中。。。（3）]

二、杂货
**手机端字体标准 ** font-family: Helvetica, "Microsoft Yahei", "Heiti SC", "Droid Sans", "Droidsansfallback", SimSun, sans-serif;

1.触摸事件touch
touchstart 手指放在屏幕上触发
touchmove 手指在屏幕上移动，连续触发
touchend 手指离开屏幕触发
touchcancel 当系统停止跟踪时触发，当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。
注意：
移动端的事件会触发浏览器的默认行为，所以在调用事件的时候要把默认行为阻止了ev.preventDefault。

document.addEventListener('touchstart',function(ev){
ev.preventDefault();
});
var box=document.getElementById("box");
box.addEventListener('touchstart',function(){
this.innerHTML='手指按下了';
});
box.addEventListener('touchmove',function(){
this.innerHTML='手指移动了';
});
box.addEventListener('touchend',function(){
this.innerHTML='手指离开了';
});

2.touch事件对象
ev.touches 当前屏幕的手指列表
ev.targetTouches 当前元素上的手指列表
ev.changedTouches 触发当前事件的手指列表
每个touch对象都包含了以下几个属性（打印ev.touches如下）：

[图片上传中。。。（4）]
clientX //触摸目标在视口中的X坐标。 clientY //触摸目标在视口中的Y坐标。 Identifier //标示触摸的唯一ID。 pageX //触摸目标在页面中的X坐标。 pageY //触摸目标在页面中的Y坐标。 screenX//触摸目标在屏幕中的X坐标。 screenY //触摸目标在屏幕中的Y坐标。
target // 触摸的DOM节点目标。
代码：

var box=document.getElementById("box");
//相当于mousedown
box.addEventListener('touchstart',function(ev){
//console.log(ev.touches);
this.innerHTML=ev.touches.length;//按下手指数
});

3.设备加速度事件devicemotion(了解：知道有这么个东西，面试移动端时项目会问到)
devicemotion 封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
其中加速度的数据包含以下三个方向：
x：横向贯穿手机屏幕；
y：纵向贯穿手机屏幕；
z：垂直手机屏幕

[图片上传中。。。（5）]

鉴于有些设备没有排除重力的影响，所以该事件会返回两个属性：
1、accelerationIncludingGravity(含重力的加速度)
2、acceleration(排除重力影响的加速度)
注意：这个事件只能放在window身上
demo1:显示重力加速度的值
代码：

window.addEventListener('devicemotion',function(ev){
var motion=ev.accelerationIncludingGravity;
box.innerHTML='x:'+motion.x+'
'+'y:'+motion.y+'
'+'z:'+motion.z;
});
demo2:方块跟着重力左右移动
window.addEventListener('devicemotion',function(ev){
var motion=ev.accelerationIncludingGravity;
var x=parseFloat(getComputedStyle(box).left);//box目前的left值
box.style.left=x+motion.x+'px';
});

demo3:摇一摇应用原理
var box=document.getElementById('box');
var lastRange=0; //上一次摇晃的幅度
var isShake=false; //决定用户到底有没有大幅度摇晃

window.addEventListener('devicemotion',function(ev){
var motion=ev.accelerationIncludingGravity;
var x=Math.abs(motion.x);
var y=Math.abs(motion.y);
var z=Math.abs(motion.z);

var range=x+y+z;            //当前摇晃的幅度
if(range-lastRange>100){
    //这个条件成立说明用户现在已经在大幅度摇晃
    isShake=true;
}

if(isShake && range<50){
    //这个条件成立，说明用户摇晃的幅度很小了就要停了
    box.innerHTML='摇晃了';
    isShake=false;
}

});

4.media

                    min-width:                                 当屏幕大小 大于等于 某个值的时候识别                                                 max-width:                                当屏幕大小 小于等于 某个值的时候识别 
                  关键字：and only not

                                                        @media all and (min-width: 500px) {
            #box{
                background-color: green;
            }
        }

5.引入方式

1.<link rel="stylesheet" href="01.css" media="all and (min-width:400px)"/>     2.@import url(01.css) (min-width:400px);     3.@media all and (min-width: 500px) {                #box{                        background-color: green;                }
    }

6.关于bootstrap

1.栅格化系统 ：将一行分为12列
容器：
container
固定宽度

    container-fluid
    百分比宽度

行：row
列：lg 大屏幕 大桌面显示器 (≥1200px)
md 中等屏幕 桌面显示器 (≥992px)
sm 小屏幕 平板 (≥768px)
xs 超小屏幕 手机 (<768px)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title></title>
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.min.css"/>

<style>
body{
margin: 0;
}
div{
height: 100px;
background-color: #f00;
font-size: 50px;
color: #fff;
}
.row div{
height: 100px;
background-color: yellow;
border: 1px solid #000;
}
</style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
        </div>
    </div>
</body>

</html>

2.col-md-offset-设置列偏移
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-md-offset-1">1</div>
<div class="col-md-2 col-md-offset-4">2</div>
</div>
</div>
3..col-md-push-(往后) 和 .col-md-pull-*（往前） 列排序4. hidden-xs 超小屏幕消失
visible-xs 超小屏幕显示

7.移动端适配

1.百分比适配

弊端：height无法设置
2.viewport 适配

   原理：就是用js把所有设备的viewport设置成一样的

3.rem适配
1rem=根节点的字体大小
动态设置根节点的字体大小

8.了解（meta）

页面描述

 <meta name="description" content="不超过150个字符" />

页面关键词
<meta name="keywords" content="html5, css3, 关键字"/>

为移动设备添加 viewport
<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

百度禁止转码
<meta http-equiv="Cache-Control" content="no-siteapp" />

禁止数字自动识别为电话号码
<meta name="format-detection" content="telephone=no">

禁止自动自动识别地址
<meta name="format-detection" content="address=no">

禁止自动自动识别日期
<meta name="format-detection" content="date=no">

关闭电话号码的自动识别：
<meta name="format-detection" content="telephone=no" />
开启电话功能
<a href="tel:123456">123456</a>
开启短信功能：
<a href="sms:123456">123456</a>

禁止自动自动识别 Email
<meta name="format-detection" content="email=no">

邮箱的自动识别：
<meta content="email=no" name="format-detection" />
同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
<metahttp-equiv="X-UA-Compatible"content="IE=8">
<metahttp-equiv="X-UA-Compatible"content="IE=7">
还有一种情况，在IE8下只有不使用兼容模式页面才能显示正常，但是如果设定为IE8的模式，在IE9中却会导致CSS3失效。看来，需要针对 IE8、IE9 分别 禁用兼容模式。怎么办呢？可以在后台判断浏览器版本，如果是 IE8就输出content="IE=8"，如果是IE9就输出 content="IE=9"。其实还可以单纯通过HTML来实现的，HTML代码如下：
<metahttp-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE">

9.弹性盒子
** ** 1. box-sizing:border-box/ (没有继承) 给自己加
效果，压边框到盒子里
padding-box/content-box 没用

chrome51：padding-box不好使
FF47： padding-box好使

盒模型:width+padding+border

  border-box: width

                     代码：

                                           <html>
<head>
    <title>box-sizing</title>
</head>
<style>
  *{
      margin: 0;
      padding: 0;
  }
    .box{
        width: 100%;
        height: 100px;
        background: cornflowerblue;
        border:10px solid #000;
        padding: 0 10px;
        box-sizing: border-box;
    }
    nav{
        height: 100px;
        margin-top: 50px;
        background: #f60;
        width: 100%;
    }
    nav ul{
        width: 100%;
         display:-webkit-box;

    }
    .nav1{
        -webkit-box-direction:reverse;/*翻转*/
    }
    nav ul li{
          height: 100px;
          -webkit-box-flex:1;
          list-style: none;
          background:aqua;
    }
    .ben{
        width: 100px;
        height: 500px;
        background: red;
        display:-webkit-box;
    }
    .ben li{
        list-style: none;
        -webkit-box-flex:1;
    }
</style>
<body>
       <div class="box">aaaaaa--box-sizing:border-box; 对border和padding都有效果，
        都会压进去（没有继承）给自己加。ie8+，chrome，ff。其他两个值不好用，
        padding-box在chrome5.1不好用ff47好用</div>
        <nav class="nav">
             <ul>
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
                 <li>4</li>
                 <li>5</li>
             </ul>
        </nav>
        <nav class="nav1">
             <ul>
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
                 <li>4</li>
                 <li>5</li>
             </ul>
        </nav>
</body>

</html>

内阴影：m
box-shadow:inset 0 2px 2px #ccc;
弹性盒子：
父级：
display:-webkit-box;

-webkit-box-orient:vertical; 竖直方向

-webkit-box-direction:reverse; 翻转

-webkit-box-pack:center; 水平居中
  start/end

-webkit-box-align:center; 垂直居中
  start/end

子级：
-webkit-box-flex:1;
1:占几份
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
{margin: 0; padding: 0;}
div{
width: 200px;
height: 500px;
}
ul{
-webkit-box-orient:vertical; /竖直方向*/
}
ul li{
-webkit-box-flex:1;
list-style: none;
background: red;
margin: 20px 0;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>

</body>

</html>

** bootstrap常用的东西自己下去了解**

** ** [图片上传中。。。（6）] [图片上传中。。。（7）] [图片上传中。。。（8）] [图片上传中。。。（9）] [图片上传中。。。（10）] [图片上传中。。。（11）] [图片上传中。。。（12）] [图片上传中。。。（13）] [图片上传中。。。（14）] [图片上传中。。。（15）]

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350

推荐阅读更多精彩内容