网易页面设计稿参考

http://3g.163.com/touch/all?nav=2&dataversion=A&version=v_standard

设计稿基准设备：iphone 6s

设备宽高： 375*667

dpr： 2.0

html元素： font-size: 50px =========  1rem = 50px

/*这里是我自己写的，设计稿根据iphone 6计算，此处根据这个算法计算rem*/
var width = document.documentElement.clientWidth || document.body.clientWidth;
if(width > 1080){width = 1080};
var fontSize = width/375*50;   //1080px下为144px; 
document.getElementsByTagName("html")[0].style.fontSize = fontSize + "%";

/*设计稿根据iphone 5s计算*/
var width = document.documentElement.clientWidth || document.body.clientWidth;
if(width > 1080){width = 1080};
var fontSize = width/320*62.5;   //默认font-size: 62.5%;

if(fontSize > 100){fontSize = 100}

document.getElementsByTagName("html")[0].style.fontSize = fontSize + "%";

 

html元素: font-size: 50px（计算后在iphone 6下font-size为50px）

body元素: width: 7.5rem （计算后在iphone 6下为375px）

body:

1.  font-size:  .32rem;  （计算后在iphone 6下为14px）
2.  max-width:  1080px;
3.  font-family:  'STHeiti','Microsoft YaHei',Helvetica,Arial,sans-serif;
4.  -webkit-tap-highlight-color:   rgba(0,0,0,0);

顶部导航

不再使用position: fixed;

改用css3属性：position:sticky;（元素不脱离文档流，但是页面滚动时会固定位置）

1.  position:  -webkit-sticky;
2.   position:  -moz-sticky;
3.   position:  -ms-sticky;
4.  position:  sticky;
5.  top:  0;
6.  left:  0;

   ---

   
   position: absolute;//元素脱离文档流
   left: 0;
   right: 0;
   top:0;
   bottom:0;//实现元素铺满屏幕
   margin: 0 auto;//实现元素水平居中显示