移动端布局的心得

Posted It奋斗小青年

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端布局的心得相关的知识,希望对你有一定的参考价值。

1.字体大小 font-sizepx/em/rem

  • px像素
  • em:根据父级的字体大小有关,1em表示是父级字体大小一致
  • rem:根据html标签的字体大小有关,1rem表示和html标签字体大小一致,默认16px,
  • rem:设置 nrem.表示把字体大小设置成和html标签的字体大小n陪,如果html没有设置则默认font-size:16px;

2.自定义字体:字体名字2字体src:url+format

复制代码
<style>
     @font-face{
font-family:"demo字体";
src:url("路径地址") fromat("truetype"\');
       }
     .customFont{
       font-family:"demo字体";
     }

</style>
<p>one</p>
<p class=\'customFont\'>two</p>
复制代码

3.  居中适配的问题

复制代码

//第一种方法
.box{

//先写旧版flex,在适配新版

  display: -webkit-box;

//设置水平居中

  -webkit-box-pack: center;

//设置垂直居中

  -webkit-box-align: center;

  //适配新版flex

  display: -webkit-flex;;

  display: flex

//设置水平居中

  -webkit-justify-content: center;

  justify-content: center;

//设置垂直居中

  -webkit-align-items: center;

  align-items: center;


/* 在移动web中,使用flex布局的时候,为了让渲染效果更好,先写旧版flex,再适配新版 */

  }
 
第二种:calc是css3的属性,但是在安卓UC浏览器中兼容不好,一般不再移动web中使用
 父级设置relative
.son{
  position: absolute;
  left: -webkit-calc(50% - 50px);
  left: -moz-calc(50% - 50px)
  left: calc(50% - 50px)
  top: -webkit-calc(50% - 50px);//需要注意的是,运算符前后都需要保留一个空格;
  top: -moz-calc(50% - 50px)
  top: calc(50% - 50px)
}
 
第三种:父级设置relative
box{
  position: absolute;
  width: 100px;
  height: 100px;
  left:50%;
  top:50%;
-webkit-transform: translate(-50% -50%);
-moz-transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
-o-transform: translate(-50% -50%);
transform: translate(-50% -50%);
}
 
第四种:
box{
  position: absolute;
  width: 100px;
  height: 100px;
  left:50%;
  top:50%;
  margin-top:-50px;
  margin-left:-50px;
  }

复制代码

注意:在定位的时候,一定不要忘了写top、left、right、bottom的值。虽然在有些手机上不写样式不会乱掉,看起来没问题。但是为了确保万一,一定要写上。不要犯这种低级错误。

之前在写移动端的页面的时候就时忘了写这几个属性的值,而是直接用margin-left、margin-top直接定位,结果在发现在苹果手机上出现了样式排版偏移的问题。

  position: absolute/fixed/relative;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;

4.重点说说弹性布局flex的兼容问题:

弹性布局虽然好用,但兼容性并不太好,除了浏览器实现有差异外,PC与移动端也有差异。

display: flex 与 display: box都用于弹性布局。display: box是2009年的命名,display: flex是2012之后的命名。但display: flex不能完全的向后兼容,有些浏览器不支持。(display: box 很少用)

复制代码
div{
//2009后的浏览器生效
 display:-webkit-box;
//2011后的浏览器生效
 display:-webkit-flex;
//2012后的浏览器生效
 display:flex;
}
复制代码

display:flex

PC端:Chrome和Firefox支持度都很好,IE不支持。 

移动端:
  • ios Safari支持,UC支持,微信浏览器不支持
  • android 原生浏览器 UC 微信都不支持

display:box

PC端:Chrome和Firefox支持度都很好,IE不支持。 

 移动端:

  • iOS Safari支持,UC支持,微信浏览器不支持
  • Android 原生浏览器 UC 支持

总结起来:IE都不支持,因此这个技术用于移动端是比较理想的,因为移动端的浏览器内核基本为webkit。

复制代码
.container{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
复制代码

5.文本溢出隐藏显示省略号

单行语法:

.text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;    
}

多行语法:

复制代码
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
复制代码
直接用css属性设置(只有-webkit内核才有作用)
移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端;
  • -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
  • display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow: ellipsis 以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本

6. 移动web触动事件

6.1on和addEventListener

1.写法上addEventListener中的相应事件不用加on前缀(onclick-->click)

2.on事件多次添加,之后执行最后一次,addEventListener事件每次添加都会生效

3.addEventListener:执行顺序是冒泡规则,:从小到大(从儿子到祖宗)

4.addEventListener:事件捕获顺序规则:从大到小(从祖宗到儿子)

addEventListener的参数讲解:
element.addEventListener(event, function, useCapture)
参数1:必须,字符串,指定事件名称,不需加on
参数2:必须,function,指定要事件触发时执行的函数
参数3:可选,布尔值,指定事件是否捕获或者冒泡阶段执行
true:事件句柄在捕获阶段执行
false:默认,事件在冒泡阶段执行
这篇文章讲的很详细两者的区别
 
6.2使用addEventListener添加事件监听
 
addEventListener(\'touchstart\',function(e){})
表示手触碰到屏幕是触发,不管当前有多少只手指
 
addEventListener(\'touchmove\',function(e){})
表示手触动在屏幕上滑动时触发e.preventDefault()来阻止默认触发的页面滚动事件
 
addEventListener(\'touchend\',function(e){})
表示手离开屏幕时触发
 
addEventListener(\'touchmove\',function(e){
console.log(e.target); //表示手触动的当前元素对象
console.log(e.touches); //页面上的所有触摸点
console.log(e.touches[0]); //touches[0]触摸点的第一个元素有许多可以使用的参数
})
 
event事件的参数
targetTouches 目标元素的所有当前触摸点
changedTouches 页面上最新更改的所有触摸点
touches 页面上的所有触摸点
touches[0]里面有以下属性
在每个触摸点中我们可以获取以下属性
- clientX:触摸目标在视口中的X坐标。
 
- clientY:触摸目标在视口中的Y坐标。
 
- pageX:触摸目标在页面中的x坐标。
 
- pageY:触摸目标在页面中的y坐标。
 
- screenX:触摸目标在屏幕中的x坐标。
 
- screenY:触摸目标在屏幕中的y坐标。
 
- target:触摸的DOM节点坐标

以上是关于移动端布局的心得的主要内容,如果未能解决你的问题,请参考以下文章

移动端项目开发心得

VUE使用Element UI心得

添加两个窗格的平板电脑布局会导致在移动设备中找不到视图(小于w600dp)

关于AUI框架自学心得

移动端网页设计经验与心得

移动端HTML5开发心得(转)