前端知道分享,移动端布局

一、下面我将简单的介绍移动端布

局的八种方式:

1.固定布局

2.流动布局

3.浮动布局

4.定位布局

5.混合布局

6.flex布局

7.rem布局

8.响应式布局

9.**圣杯布局10.**双飞翼布局

1.固定布局方法里把加好,然后根据设计稿设定相应的宽度即可,其他地方类似于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);

varrange=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@mediaall and (min-width:500px) {            #box{background-color: green;            }        }

5.引入方式

1.2.@importurl(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)


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;

}

2.col-md-offset-设置列偏移

1

2

3..col-md-push-(往后) 和 .col-md-pull-*(往前) 列排序4. hidden-xs 超小屏幕消失

visible-xs 超小屏幕显示

7.移动端适配

1.百分比适配

弊端:height无法设置

2.viewport 适配

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

3.rem适配

1rem=根节点的字体大小

动态设置根节点的字体大小

8.了解(meta)

页面描述

页面关键词

为移动设备添加 viewport

百度禁止转码

禁止数字自动识别为电话号码


禁止自动自动识别地址


禁止自动自动识别日期


关闭电话号码的自动识别:

开启电话功能

123456

开启短信功能:

123456

禁止自动自动识别 Email


邮箱的自动识别:

同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:

dooyoe@gmail.com

还有一种情况,在IE8下只有不使用兼容模式页面才能显示正常,但是如果设定为IE8的模式,在IE9中却会导致CSS3失效。看来,需要针对 IE8、IE9 分别 禁用兼容模式。怎么办呢?可以在后台判断浏览器版本,如果是 IE8就输出content="IE=8",如果是IE9就输出 content="IE=9"。其实还可以单纯通过HTML来实现的,HTML代码如下:

9.弹性盒子

1. box-sizing:border-box/ (没有继承) 给自己加

效果,压边框到盒子里

padding-box/content-box 没用

chrome51:padding-box不好使

FF47: padding-box好使

盒模型:width+padding+border

border-box: width代码:box-sizing*{margin:0;padding:0;  }.box{width:100%;height:100px;background: cornflowerblue;border:10pxsolid#000;padding:010px;box-sizing: border-box;    }nav{height:100px;margin-top:50px;background:#f60;width:100%;    }navul{width:100%;display:-webkit-box;    }.nav1{-webkit-box-direction:reverse;/*翻转*/}navulli{height:100px;-webkit-box-flex:1;list-style: none;background:aqua;    }.ben{width:100px;height:500px;background: red;display:-webkit-box;    }.benli{list-style: none;-webkit-box-flex:1;    }aaaaaa--box-sizing:border-box; 对border和padding都有效果,        都会压进去(没有继承)给自己加。ie8+,chrome,ff。其他两个值不好用,        padding-box在chrome5.1不好用ff47好用

1

2

3

4

5

1

2

3

4

5

内阴影: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:占几份

{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;

}

1

1

1

1

1

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

[图片上传中。。。(6)] [图片上传中。。。(7)] [图片上传中。。。(8)] [图片上传中。。。(9)] [图片上传中。。。(10)] [图片上传中。。。(11)] [图片上传中。。。(12)] [图片上传中。。。(13)] [图片上传中。。。(14)] [图片上传中。。。(15)]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 一、下面我将简单的介绍移动端布局的八种方式:** 1.固定布局**2.流动布局3.浮动布局4.定位布局5.混...
    张宪宇阅读 1,427评论 0 2
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,453评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,395评论 0 26
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,512评论 0 1
  • 总有一群人,看着很多心灵文章,一直不停的说着,我要成为一个很好的人,要更好的成长,然而回到现实中,还是原来的那个你...
    蒋莹阅读 459评论 0 1