链课手机端优化及更新

in moochain •  5 years ago 

moochainphone.jpg

链课在样式方面是用的Bootstrap的框架,响应式的,对于不是特别复杂或是功能很多的网站,其实一站就可以了。在前端设计时只有调整下样式,就可以响应式的布局。也就是说,当电脑打开时会展示电脑端的样式,当用手机打开时会展示手机的样式。这比重新做个APP或是小程序要简单些。

在CSS样式中只需加上一段代码即可:

@media only screen and (max-width:768px) {
    h1{
      padding-left: 1rem;
    }
    #content{
      width: 95%;
    }
    .newtext{
      width: 90%;
      margin-left: 1rem;
    }

  }

关键是第一行代码:它会自动判断是不是手机端,如果是,则使用以下样式!

在做手机端优化时,也做了一些小更新:把封面图加上了,在其它前端(如steemit)加上了直达链课的链接......

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

@tipu curate

Upvoted 👌 (Mana: 5/10 - need recharge?)