移动端页面构建需注意？

1、 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

2、 浮动问题：如果中间有盒子是浮动的，则需要把下边的盒子设置为定位的话，可以选择设置距离底部的距离让其向下（bottom:0），这时又需要给他们的外边的最大盒子设置为子绝父相的形式，并操作捷径给整个大盒子设置固定的高度。

3、 视频标签引用问题：尽量都是用video标签，ifarme,embed有可能会出现问题。

  <video src="http://www.huizhangongsi.com/video/acme.mp4" width="320" height="200" controls  class="test2"></video>

4、 左右布局（左图片右文字）要记得尽量使用flex布局:

 父盒子：

display: flex;
justify-content: space-between;

两个子盒子设置:flex:4...

5、 移动端页面图片，宽高都尽量使用百分比的形式。

6、 多余字体显示不全用：

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

7、 设置logo居中

.logo{
100%;
height: 120px;
background-color: #000;
position:relative;
}
.logo img{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}

8、想让视频播放显示完整使用（需要计算视频的显示的宽高比例）：

var vedioWidth = $(".test2").width();
$(".test2").css('height',vedioWidth*178/317.25);

9、页面左右滑动出现滚动条的原因就是：页面的内容撑开了整个屏幕，屏幕宽度不够不能容下那些内容了，所以会出现可以滑动问题，解决办法需要在火狐浏览器上可以查看是哪个元素撑开盒子了，然后重新设置即可。

10.移动端页面会有兼容性问题，做之前需要考虑这个问题书写。