一、下面我将简单的介绍移动端布
局的八种方式:
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
百度禁止转码
禁止数字自动识别为电话号码
禁止自动自动识别地址
禁止自动自动识别日期
关闭电话号码的自动识别:
开启电话功能
开启短信功能:
禁止自动自动识别 Email
邮箱的自动识别:
同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:
还有一种情况,在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常用的东西自己下去了解