高仿版今日头条

采用响应式移动布局，会根据屏幕大小不同程度缩放，来看看效果对比

效果对比图

实现原理其实十分简单，需要配合flexible.js和jquery库实现原理，数据是拿到本地的，所以不存在跨域情况，
做出来如上效果其实很容易，首先把静态页面铺好，如果用的是sublime text编辑器，首先在点击菜单栏找到倒数第二项preferences，选择第一个选项，浏览程序包，找到cssrem.sublime-settings这里简单设置一下px和rem的转换比，选择合适的比例。这里不多介绍了我选的是37.5，因为我的iphone 6 写页面，然后自适应所有就可以了。

第一步

第二步

然后设置完基本属性后，就开始做页面了
页面的话很简单

基本文件夹

等结构样式设置完之后，导航地方有两种写法，一种是js逻辑去处理，另一种是用C3去做，我觉得还是尽可能使用C3去代替Dom操作，页面小倒无所谓，页面多的话会影响页面性能的，而且C3写出来的丝滑流畅哈哈哈哈。

最后展示一下代码吧，废话不多说了，写完赶紧吃饭去。。
下面是index.html代码部分

    
    
    
    
    
    
    
    


    

    
    

        ![](images/message.png)
        

            ![](images/logo.png)
            ![](images/refresh.png)
        
        ![](images/search.png)
    
    
    
    

        

            
推荐
            
热点
            
北京
            
视频
            
社会
            
娱乐
            
科技
            
体育
            
汽车
            
财经
            
搞笑
            
更多
        
        
+
    
    
    

        
实拍中国最牛气的几座高铁站，看看有你去过的吗?
        

            ![](images/newpic_1.jpg)
            ![](images/newpic_2.jpg)
            ![](images/newpic_3.jpg)
        
        

             博览古今中外历史 
             评论 
             481 
             刚刚 
        
    

    
    

        
今年大蒜行情：莫要再谈 “供求” 在作怪，实属 “贪婪” 惹的祸
        

            ![](images/newpic_4.jpg)
            ![](images/newpic_5.jpg)
            ![](images/newpic_6.jpg)
        
        

             久久星空  
             评论 
             33 
             2分钟前 
        
    

    
    

        
今年大蒜行情：莫要再谈 “供求” 在作怪，实属 “贪婪” 惹的祸
        

            ![](images/newpic_1.jpg)
            ![](images/newpic_6.jpg)
            ![](images/newpic_3.jpg)
        
        

             久久星空  
             评论 
             33 
             2分钟前 
        
    

    
    

        
今年大蒜行情：莫要再谈 “供求” 在作怪，实属 “贪婪” 惹的祸
        

            ![](images/newpic_4.jpg)
            ![](images/newpic_1.jpg)
            ![](images/newpic_6.jpg)
        
        

             久久星空  
             评论 
             33 
             2分钟前 
        
    

    
    

        
今年大蒜行情：莫要再谈 “供求” 在作怪，实属 “贪婪” 惹的祸
        

            ![](images/newpic_2.jpg)
            ![](images/newpic_3.jpg)
            ![](images/newpic_6.jpg)
        
        

             久久星空  
             评论 
             33 
             2分钟前 
        
    

    
    

        
今年大蒜行情：莫要再谈 “供求” 在作怪，实属 “贪婪” 惹的祸
        

            ![](images/newpic_1.jpg)
            ![](images/newpic_3.jpg)
            ![](images/newpic_5.jpg)
        
        

             久久星空  
             评论 
             33 
             2分钟前 
        
    

    

导航部分的JS逻辑部分

// 导航滑动
    $(function(){
        var startX,
            moveX;
            $(".nav ul").on("touchstart",function(e){
                var target = e.targetTouches[0];
                startX = this.offsetLeft - target.clientX;
            })
            $(".nav ul").on("touchmove",function(e){
                var target = e.targetTouches[0];
                this.style.left = target.clientX + startX+"px";

                if(this.offsetLeft>=0){
                    this.style.left = 0;
                }
                if(this.offsetLeft<(innerWidth-this.offsetWidth)){
                    this.style.left = (innerWidth-this.offsetWidth)+"px";
                }
            })
        })

基本样式在这里

#headernull{
    height:1.2rem;
}
#header{
    height:1.173333rem;
    background:#d33d3e;
    display:flex;
    position: fixed;
    top:0;
    left:0;
    right:0;
    z-index:999;
}
#header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 0.4rem;
}
#header .ce{
    display:flex;
    align-items:center;
}
#header .ce>img:first-of-type{
    width:2.213333rem;
    height:0.533333rem;
}
#header .ce>img:last-of-type{
    width:0.4rem;
    height:0.4rem;
    padding-left:0.133333rem;
}
#header>img:first-of-type,
#header>img:last-of-type{
    width:0.673333rem;
    height:0.673333rem;
}

/*导航*/
.nav{
    overflow:hidden;
    height:0.986667rem;
    position: relative;
    background:#eee;
    border-bottom:#eee;
}
.nav ul{
    position: absolute;
    left:0;
    height:0.986667rem;
    width: 17.066667rem;
    line-height: 0.986667rem;
}
.nav ul li{
    width:1.25rem;
    display:inline-block;
    font-size: 0.426667rem;
    text-align:center;
}
.nav p{
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    width:1.066667rem;
    height:0.986667rem;
    line-height: 0.986667rem;
    text-align:center;
}
.nav p a{
    text-decoration:none;
    color:red;
    font-size:0.8rem;
    background:#eee;
}

/*新闻一*/
#new{
    height:4.8rem;
    width:9.5rem;
    border-bottom:0.026667rem solid #dfdfdf;
    margin:0 auto;
    font-size: 0;
}
#new p{
    line-height: 0.76rem;
    font-size:0.426667rem;
    color:#333;
}
.new_top img{
    width:3.053333rem;
    height:2.133333rem;
    padding:0 0.04rem;
}
.new_bottom span{
    font-size:0.293333rem;
    color:#9c9c9c;
    line-height: 1rem;
    padding:0 0.04rem;
}

还有重置样式这个就自己写好了，margin:0 padding:0;简单设置一下就好，好了吃饭去了。。。