移动端布局的心得

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%);<br />-moz-transform: translate(-50% -50%);<br />-ms-transform: translate(-50% -50%);<br />-o-transform: translate(-50% -50%);<br />transform: translate(-50% -50%);<br />}

第四种：

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:;
  -webkit-box-orient: vertical;
}

直接用css属性设置(只有-webkit内核才有作用)

移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；

• -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
• display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本