Hexo NexT主题移动端样式适配

个人网站搭建也有一段时间了，期间整合了挺多个性化功能，都是基于 PC 端而做的。最近在推自己小站时，朋友间的分享都是基于手机，然而 NexT 自有的样式在移动端的效果并不大理想，遂萌生了样式适配的想法。NexT 主题有预留给用户自定义 css 样式的文件：custom.styl，在这里可以添加自己喜欢的样式代码。

本站主题已 Share 至 Github，欢迎访问

手机端主页：

其它的页面也做了美化，就不一一贴图了，具体效果可在手机端查看，以下是之前保存的截图链接地址

本站基于 Hexo v3.9.0、 NexT v5.1.4 魔改，其它版本不敢保证都能兼容！

附上本站自定义的 custom.styl 文件，供参考

#days {
  display: block;
  color: rgb(7, 179, 155);
  font-size: 13px;
}

/*网站底部订阅图标*/
.subscribe-box {
  position: absolute;
  bottom: 45px;
  left: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,.35);
  animation: heartAnimate 2s ease-in-out infinite;
}
.subscribe-menu {
  position: relative;
  height: 24px;
  width: 24px;
  cursor: url(/images/pointer.cur),auto;
  background: url(/images/wechat.svg);
  background-size: 24px 24px;
}
.subscribe-hover {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 0;
  border-radius: 3px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.35);
  background: url(https://s2.ax1x.com/2019/11/02/KLhDeA.th.jpg);
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 150px 150px;
  transition: all .35s ease-in-out;
  z-index: 1024;
  opacity: 0;
}
.subscribe-description {
  opacity: 0;
  position: absolute;
  bottom: 3%;
  left: 5%;
  right: 5%;
  font-size: 12px;
  transition: all .35s cubic-bezier(1,0,0,1);
}
.subscribe-menu:hover .subscribe-hover {
  bottom: 24px;
  left: 24px;
  height: 140px;
  width: 150px;
  opacity: 1
}
.subscribe-menu:hover .subscribe-description {
  opacity: 1
}

/*菜单*/
.menu-item:hover{
  transform: scale(1.1);
  box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);
  //border-radius: 3px;
}

/*近期文章*/
.my-links-of-blogroll-li:hover{
  transform: scale(1.1);
  box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);
  /* 动画效果 */
  color: rgba(0,0,0,0.1); /* transparent IE 不支持 */
  animation: hue 1.5s linear infinite;
  background-image: linear-gradient(
    to right,
    #fffed4,
    #fffede,
    #fdffe2,
    #f7ffec,
    #ecfaf3,
    #f1fffd,
    #fafbff,
    #f7fffc,
    #fffee4
  );
}

/* 排行榜 */
.my-article-top:hover{
  transform: scale(1.1);
  box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);
  border-radius: 30px;
  width: 400px;
  padding: 5px 10px;
  transition-duration: 0.15s;
  +mobile(){
    width: 315px;
  }
  /* 动画效果 */
  color: rgba(0,0,0,0.1); /* transparent IE 不支持 */
  animation: hue 1.5s linear infinite;
  background-image: linear-gradient(
    to right,
    #fffed4,
    #fffede,
    #fdffe2,
    #f7ffec,
    #ecfaf3,
    #f1fffd,
    #fafbff,
    #f7fffc,
    #fffee4
  );
}

/*归档页样式优化 began*/
.page-archive .archive-page-counter {
  font-size: 18px;
  background-color: #49b1f5;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 8px;
  color: #fff;
  +mobile() {
    font-size: 16px;
  }
}
.my-post-time{
  font-size: 11px;
  position: absolute;
  color: #fff;
  background-color: #49b1f5;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 15px;
}
.mypost{
  position: relative;
  margin-bottom: 1rem;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
a.my-post-title-link:before{
  top: 10px;
  width: 18px;
  height: 18px;
  content: "📚";
  margin-right: 5px;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 15px;
  line-height: 18px;
}
.my-post:hover{
  transform: scale(1.1);
  box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);
  border-radius: 30px;
  width: 400px;
  padding: 1px 10px;
  margin-left: 25px;
  font-size: 16px;
  transition-duration: 0.15s;
  +mobile(){
    width: 260px;
    margin-left: 18px;
  }
  /* 动画效果 */
  color: rgba(0,0,0,0.1); /* transparent IE 不支持 */
  animation: hue 2s linear infinite;
  background-image: linear-gradient(
    to right,
    #fffed4,
    #fffede,
    #fdffe2,
    #f7ffec,
    #ecfaf3,
    #f1fffd,
    #fafbff,
    #f7fffc,
    #fffee4
  );
}
a.my-post-title-link{
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  +mobile() {
    font-size: 14px;
  }
}
.my-post-title{
  display: block;
  margin-left: 4.5rem;
  color: #4c4948;
  text-decoration: none;
  font-size: .8rem;
  cursor: pointer;
  +mobile() {
    //margin-left: 4rem;
  }
}
.my-post-header{
  position: top;
  margin-bottom: 1rem;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.my-post-meta{
  position: absolute;
  color: #99a9bf;
  width: 80px;
  color: #114142;
}
div.post-block.tag .collection-title h2 {
  border-width: 1px;
  border-style: solid;
  border-color: #3f3f3f;
  border-radius: 20px;
  font-size: 22px;
  background-color: #b4e8fa;
  padding: 2px 15px;
  letter-spacing: 1.5px;
  box-sizing: border-box;
  color: #3f3f3f;
  display: inline-block;
  margin: 10px 0 10px;
  text-align: center;
  +mobile(){
    font-size: 18px;
  }
}
.category-list-link:hover{
  transform: scale(1.1);
  box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);
  border-radius: 8px;
  padding: 1px 1px;
  margin-left: 5px;
  font-size: 16px;
  transition-duration: 0.15s;
}
/*归档页样式优化 end */

.main{
  padding-bottom: 150px;
}

.headband {
  //display: none;
  height: 1px;
  background: $gainsboro;
  +mobile(){
     height: 0px;
  }
}

body {
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position:50% 50%;
}

/*评论数*/
.posts-expand .post-comments-count {
    display: none;
}

/*鼠标样式*/
* {
  cursor: url(/images/default.cur),auto;
}
:link {
  cursor: url(/images/pointer.cur),auto
}

/*文章底部评分相关*/
.post-widgets {
  margin-bottom: 45px;
  margin-top: 30px;
}

/*文章底部标签样式*/
.posts-expand .post-tags a {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  font-family: 'Comic Sans MS', sans-serif;
  transition: .2s ease-out;
  padding: 3px 5px;
  margin: 5px;
  background: #f5f5f5;
  border-bottom: none;
  border-radius: 15px;

  +mobile(){
    padding: 1px 3px;
    font-size: 8px;
  }

  &:hover {
    background: rgba(100,154,182,0.902);
    color: #fff;
    -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    -moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
}

/* pc主页文章添加阴影效果 */
.post {
  margin-top: 0px;
  margin-bottom: 50px;
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

/* 1~4级标题设置 */
h1,
h2,
h3,
h4,
strong {
  font-weight: 600;
  color: #2c3e50;
}

blockquote{// PC端>符号表示的内容样式
  font-size: 15px;
  background: #d9efdc5e;
  border-left-color: #0fc53085;
}
.tip, blockquote {
  padding: 12px 24px 12px 30px;
  margin: 1em 0;
}
p {
  margin: 10px 0 10px 0;
}

/*文章页*/
.posts-expand{
  margin: 0 1px;
  padding-top: 0px;
}

.posts-expand .post-body p{
  font-size: 15px;
  letter-spacing: 1px;
  margin:3px 0;
  padding-bottom:4px;
}

.posts-expand .post-body .fancybox img {
  margin: 10px auto 10px;
}

/* 一到六级标题设置 */
.posts-expand .post-body h1,
.posts-expand .post-body h2,
.posts-expand .post-body h3,
.posts-expand .post-body h4,
.posts-expand .post-body h5,
.posts-expand .post-body h6 {
  padding-top: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.posts-expand .post-body ul li{
  margin-bottom: 10px;
  list-style: none;
  color: #000;
  font-size: 15px;
}
.posts-expand .post-body ul li p{
  text-align: left;
}

/* 隐藏返回顶部猫，使用魔方替代 */
.back-to-top {
  width: 70px;  //图片素材宽度
  height: 900px;  //图片素材高度
  top: -900px;
  bottom: unset;
  transition: all .5s ease-in-out;
  background: url("/images/scroll.png");
  > i {
    display: none;
  }
  &.back-to-top-on {
    bottom: unset;
    top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;
  }
}
*/

/*代码块复制按钮*/
.highlight{
  position: static;
}

highlight-wrap {
  background: #008b89;
}

.btn-copy {
  display: inline-block;
  cursor: pointer;
  background-color: #eee;
  background-image: linear-gradient(#fcfcfc,#eee);
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: #333;
  -webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
  padding: 2px 6px;
  position: absolute;
  right: 5px;
  top: 5px;
  opacity: 0;
}
.btn-copy span {
  margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}
.read-over{//本文阅读结束
  text-align: center;
  margin-top: 20px;
  color: #ea103d91;
  font-size:18px;
}

.share_reward{//pc打赏
  margin: 10px auto;
  width: 90%;
  text-align: center;
}
#rewardButton {//打赏
  margin: 15px auto;
}

code {
  color: #c7254e;
  background: #f9f2f4;
  border: 1px solid #d6d6d6;
  padding:1px 4px;
  word-break: break-all;
  border-radius:4px;
}
/*大代码块的自定义样式*/
.highlight, pre {
  margin: 0px 0;
  border-radius: 3px;
}
.highlight, code, pre {
  border: 1px solid #d6d6d6;
}

.post-body {
  color: #000;
}
.post-body .note{//提示条
  font-size: 15px;
}

/*文章标题字体*/
.posts-expand .post-title {
  font-size: 28px;
  letter-spacing: 1px;
  font-weight: 700;
  text-align: center;
  +mobile() {
    font-size: 20px;
  }
}

/*文章标题动态效果*/
.posts-expand .post-title-link::before {
  background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
/*文章大标题*/
.posts-expand .post-title-link:hover{
  transform: scale(1.1);
}

.posts-expand .post-meta{
  margin-bottom: 20px!important;
}

.post-body a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  //text-decoration: underline  // none || underline || blink || overline || line-through
  &:hover {
    color: #fc6423;
    text-decoration: none;
    border-bottom: 1px solid #fc6423;
  }
}

/* 精品文章 began */
.jingping{
  background : #00a8c3;
  padding:2px 4px 2px 4px;
  color: #fff;
}
/*  精品文章 end */

/*热评文章 */
.ds-top-threads li a {
  padding-left: 5px;
  transition: border-width 0.2s linear 0s, color 0.2s linear 0s;
  border-bottom: none;
}
.ds-top-threads li a:hover {
  border-left: 8px solid #4d768c;
}

/*相关文章推荐 pc样式设置*/
summary{
  outline: 0;
  cursor: pointer;
  margin-top: 15px;
  +mobile() {/*手机端*/
    font-size: 14px;
    margin-top: 10px;
  }
}
details{
  margin-left: 20px;
}
details .popular-posts{
  +mobile() {
      margin: 5px -12px;
  }
}
.popular-posts-header {
  margin-top: 45px;
  font-size: 20px;
  font-weight: 900;
  border-bottom: 1px solid #eee;
  +mobile() {/*手机端*/
    font-size: 18px;
    margin-top: 25px;
  }
}
ul.popular-posts .popular-posts-item .popular-posts-title a {
  border-bottom: 1px solid #999;
  &:hover{
    border-bottom: none;
  }
}

.xiaohutong-img-class{
  width:960px;
  height:660px;
}

/*友链页样式 begain --------> */
 #links{
   margin-top: 5rem;
 }
.links-content{
  margin-top:1rem;
}
.link-navigation::after {
  content: " ";
  display: block;
  clear: both;
}
.card {
  width: 300px;
  font-size: 1rem;
  padding: 10px 20px;
  border-radius: 4px;
  transition-duration: 0.15s;
  margin-bottom: 1rem;
  display:flex;
}
.card:nth-child(odd) {
  float: left;
}
.card:nth-child(even) {
  float: right;
}
.card:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  /* 动画效果 */
  color: rgba(0,0,0,0.1); /* transparent IE 不支持 */
  animation: hue 1.5s linear infinite;
  background-image: linear-gradient(
    to right,
    #fffed4,
    #fffede,
    #fdffe2,
    #f7ffec,
    #ecfaf3,
    #f1fffd,
    #fafbff,
    #f7fffc,
    #fffee4
  );
}
.card a, .card a:hover {
  border:none;
}
.card .ava {
  width: 3rem!important;
  height: 3rem!important;
  margin:0!important;
  margin-right: 1em!important;
  border-radius:4px;
}
.card .card-header {
  font-style: italic;
  overflow: hidden;
  width: 236px;
}
.card .card-header a {
  font-style: normal;
  color: #2bbc8a;
  font-weight: bold;
  text-decoration: none;
}
.card .card-header a:hover {
  color: #d480aa;
  text-decoration: none;
}
.card .card-header .info {
  font-style:normal;
  color:#a3a3a3;
  font-size:14px;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
span.focus-links {
  font-style: normal;
  margin-left: 10px;
  position: unset;
  left: 0;
  padding: 0 7px 0 5px;
  font-size: 11px;
  border-color: #42c02e;
  border-radius: 40px;
  line-height: 24px;
  height: 22px;
  color: #fff !important;
  background-color: #42c02e;
  display: inline-block;
}
span.focus-links:hover{
  background-color: #318024;
}
.friends-btn{
  text-align: center;
  color: #555!important;
  background-color: #fff;
  border-radius: 3px;
  font-size: 15px;
  box-shadow: inset 0 0 10px 0 rgba(0,0,0,.35);
  border: none!important;
  transition-property: unset;
  padding: 0 15px;
  margin: inherit;
}
.friends-btn:hover{
  color: rgb(255, 255, 255) !important;
  border-radius: 3px;
  font-size: 15px;
  box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
  background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
  margin: inherit;
}
/*友链页样式 end    --------> */

.menu {
  float: none;
}
.logo-line-before,
.logo-line-after {
  display: none;
}
.menu .menu-item a {
  font-size: 14px;
  color: rgb(15, 46, 65);
  border-radius: 4px;
}

/* 网站标题 炫彩效果1 */
.site-title{
  background-image: linear-gradient(
    to right,
    orangered,
    orange,
    gold,
    lightgreen,
    cyan,
    dodgerblue,
    mediumpurple,
    hotpink,
    orangered
  );
  /*注意颜色得始终要相同,不然就会有突变颜色线条,影响视觉*/
  background-size: 110vw;
  -webkit-background-clip: text;
  color: rgba(0,0,0,0.1); /* transparent IE 不支持 */
  animation: sliding 30s linear infinite;
}
@keyframes sliding{
  to{
    background-position:  -2000vw;
  }
}

/* 网站副标题 炫彩效果2 */
.site-meta, /* 移动端炫动效果 */
.site-subtitle {
  font-family: 'Apple Chancery', fantasy, 'Comic Sans MS', sans-serif; // Luminari
  letter-spacing: 2px;
  +mobile(){
    font-size: 12px;
  }
  color: rgba(0,0,0,0.1); /* transparent IE 不支持 */
  animation: hue 1.5s linear infinite;
  background-image: linear-gradient(to right bottom, rgb(255,0,0), rgb(255,128,0), rgb(255,255,0), rgb(0,255,0), rgb(0,255,128), rgb(0,255,255), rgb(0,128,255), rgb(0,0,255), rgb(128,0,255), rgb(255,0,255), rgb(255,0,128));
  -webkit-background-clip: text;
}
@keyframes hue {
  from {
      filter: hue-rotate(0);
  }
  to {
      filter: hue-rotate(-360deg);
  }
}

.site-meta{
  background: #ecf9f8;
  +mobile(){
    padding: 10px 0;
    background-image: linear-gradient(90deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%)!important;
  }
}
.site-meta .site-title {
  font-size: 22px;
  font-weight: bold;
  font-family: Zapfino, 'Comic Sans MS', sans-serif;
  letter-spacing: 5px;
  margin: 5px 0px 15px 0;
  +mobile(){
    margin: 5px 0px 0px 0px;
    letter-spacing: 3px;
    font-size: 18px;
  }
}
.footer {
  //background: none;
  //font-size: 14px;
}
.footer-inner {
  font-family: 'Comic Sans MS', sans-serif;
  text-align: center;
  color: #4c618f;
}

/* 尾部不蒜子访客统计 */
.site-uv
{
  margin-right: -13px;
  display: inline; /* safari 不换行*/
  &::after {
    content: "";
  }
}
.site-uv,
.site-pv,
.page-pv {
  display: inline; /*百度浏览器不换行*/
}
.busuanzi-value {
  color: #1890ff;
}

.site-author-name {
  margin: 18px 0 0;
  color: #090909;
  //font-family: 'Comic Sans MS', sans-serif;
}
.site-description{
  margin-top: 10px;
  font-size: 14px;
}
.links-of-blogroll {
  font-size: 13px;
  margin-bottom: 15px;
  margin-top: 10px;
}
.links-of-author {
  margin-top: 10px;
}
.links-of-author-item{
  padding: 0 1px;
}
.links-of-author-item a{
  padding: 0 1px;
}

.site-overview {//左侧socia标签居中
  text-align: center;
}
.sidebar-inner {
  color: #649ab6;
}
.sidebar {
  margin-left: auto; /* for IE */
  margin-left: inherit;
  box-shadow: inset 2px 2px 40px #bdb2b2;
}
.sidebar a {
  color: #649ab6;
  border-bottom-color: #649ab6;
  border-bottom: none;
}
.sidebar a:hover {
  color: #0c0b0b;
}
.site-state-item {
  display: inline-block;
  padding: 1px 15px;
  border-left: 1px solid #649ab659;
}
.sidebar-nav .sidebar-nav-active {
  color: #649ab6;
  border-bottom-color: #649ab6;
}
.sidebar-nav li:hover {
  color: #0c0b0b;
}
.sidebar-toggle {
  background: #649ab6;
}
/*文章目录样式*/
.post-toc .nav .active>a {
  color: #4f7e96;
}
.post-toc ol a:hover {
  color: #7784ba;
}
.sidebar-nav .sidebar-nav-active:hover {
  color: #37596c;
}
a {
  border-bottom: none;
}

/* 首页文章图片 */
.index_img_class{
  width: 100%;
  height: 450px;
  +mobile(){
    height: 190px;
  }
}

/* 文章首字下沉、大号字体效果 */
.post-body>p:first-child::first-letter{
  float: left;
  margin-top: 14px;
  margin-right: 6px;
  color: #555;
  font-size: 42px;
  line-height: 28px;
  font-style: normal;
  font-weight: 400;
  +mobile(){
    margin-top: 10px;
    margin-right: 4px;
    font-size: 26px;
    line-height: 20px;
  }
}

/*首页阅读全文样式*/
.post-button {
  margin: 10px auto;
}
.post-button {
  margin: 30px auto;
  +mobile(){
    margin: 10px auto;
  }
}
.posts-expand .post-eof{
  margin: 30px auto;
  +mobile(){
    margin: 20px auto 10px;
  }
}
.post-button .btn {
  color: #555;
  background-color: rgb(255, 255, 255);
  border-radius: 3px;
  font-size: 15px;
  box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
  border: none !important;
  transition-property: unset;
  padding: 0px 15px;
  margin: inherit;
  +mobile(){
    color: rgb(255, 255, 255);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
  }
}
.post-button .btn:hover {
  color: rgb(255, 255, 255);
  border-radius: 3px;
  font-size: 15px;
  box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
  background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
  margin: inherit;
}

/* 自定义页脚跳动的心样式 began */
@keyframes heartAnimate {
  0%,100%{transform:scale(1);}
  10%,30%{transform:scale(0.9);}
  20%,40%,60%,80%{transform:scale(1.1);}
  50%,70%{transform:scale(1.1);}
}
.with-love {
  animation: heartAnimate 1.33s ease-in-out infinite;
  color: rgb(255, 113, 168);
}
/* 自定义页脚跳动的心样式 end */

/*修改选择字体块背景颜色*/
::selection {
  background: #fff159;
  color: #222;
}

.pagination{
    margin: 50px;
    text-align: center;
    border-top:0px;
  }
/* 页码数字显示当前页码样式设置 */
.pagination .page-number.current{
  background-color: #49b1f5;
  background: #49b1f5;
  border-radius: 50%;
}
/* 页码样式设置 */
.pagination .page-number{
  border: 3px solid #49b1f5;
  border-radius: 50%;
}


/* valine 评论系统样式 began ------------------> */
/* 评论列表边框*/
.valine .vlist .vcard {
  border-radius: 8px;
  border: 1px solid #4aeb877d;
}
.valine .vlist .vcard .vcomment-children .vlist .vcard {
  border: none!important;
}

/* valine 评论系统样式 end  ------------------> */


/* 适配手机样式 began ------------------------> */
@media (max-width: 767px){
  /*手机端body体显示*/
  body{
    background-image: none;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #34495e;
  }
  /*手机端菜单栏样式*/
  .menu {
    display: flex;
    margin-left: 5px;
    float: none !important;
  }

  .menu .menu-item a{
    /*font-weight: 600;*/
    color: #2c3e50;
    font-size: 14px;
    padding: 5px 12px;
  }
  /*选中菜单样式*/
  .menu-item-active a:after{
    top: -10%;
    right: 24px;
  }

  blockquote p{
    font-size: 13px;
  }
  .back-to-top{
    display: none;
    right: 0px;
    opacity: .2;
  }

  /*手机屏幕下多级标签样式修改*/
  .posts-expand .post-body h1 {
    margin: 0 0 0em;
  }
  .posts-expand .post-body h2,
  .posts-expand .post-body h3 {
    pointer-events: none;
  }
  .posts-expand .post-body h1 ,
  .posts-expand .post-body h2 ,
  .posts-expand .post-body h3 ,
  .posts-expand .post-body h4  {
    pointer-events: auto;
    color: #2c3e50;
  }
  .posts-expand .post-body h1:before
  .posts-expand .post-body h2:before
  .posts-expand .post-body h3:before
  .posts-expand .post-body h4:before
  .posts-expand .post-body h5:before
  .posts-expand .post-body h6:before{
    display: none;
  }
  .posts-expand .post-body h2 {
    padding-bottom: 0.7em;
    border-bottom: 1px solid #ddd;
  }
  .posts-expand .post-body h3 {
    line-height: 1.2;
    position: relative;
  }
  .posts-expand .post-body h3 > a:before {
    content: "";
    color: #42b983;
    position: absolute;
    left: -0.7em;
    margin-top: -0.05em;
    padding-right: 0.5em;
    font-size: 1.2em;
    line-height: 1;
    font-weight: bold;
  }
  .posts-expand .post-body figure {
    /*margin: 1.2em 0;*/
  }
  /*手机段落样式修改*/
  .posts-expand .post-body p {
    line-height: 1.6em;
    text-align: left;
    font-size: 14px;
    margin: 5px 0;
    padding-bottom: 6px;
    position: relative;
    z-index: 1;
    color: #5e6d82;
  }

  /* 手机端 列表样式修改*/
  .posts-expand .post-body ul,
  .posts-expand .post-body ol {
    position: inherit;
  }
  .posts-expand .post-body ul ul,
  .posts-expand .post-body ol ul,
  .posts-expand .post-body ul ol,
  .posts-expand .post-body ol ol {
    margin: 0;
  }
  .posts-expand .post-body ul li{
    font-size: 13px;
    color: #5e6d82;
  }
  .posts-expand .post-body a {
    font-weight: 400;
  }
  p{
    line-height: 1.6em;
    margin: 1.2em 0 -1.2em;
    padding-bottom: 1.2em;
    position: relative;
    z-index: 1;
    font-size: 14px;
    word-spacing: 0.05em;
  }

  li{
    font-size: 14px;
    color: #5e6d82;
  }
  .post-button a {
    font-size: 16px;
  }
  .posts-expand .post-meta {
    font-size: 8px;
    text-align: center;
    margin: 1px 0 20px 0;
  }
  /*设置不展示字数统计*/
  .posts-expand .post-meta .post-wordcount{
    //display: none;
  }

  .page-post-detail .post-meta{
    margin: 10px 0px;
  }

  .page-post-detail .post-title {
    font-weight: 600;
    font-size: 20px !important;
  }

  .my_post_copyright{/* 版权所有 */
    width: 95%;
    font-size: .73rem
    margin: 2em auto 0
  }
  .my_post_copyright p {
    font-size: 12px;
    margin: 3px;
    line-height: 1.2em;
    padding-bottom: 0.5em;
  }
}
/*适应手机屏幕设置*/
@media (max-width: 767px) {
  .header-inner {
    margin-bottom: 10px !important;
    background: none;
  }
  .posts-expand .post-body h1 {
    padding-top: 20px;
  }
  .posts-expand .post-body h2,
  .posts-expand .post-body h3 {
    pointer-events: none;
  }
  .posts-expand .post-body h1 ,
  .posts-expand .post-body h2 ,
  .posts-expand .post-body h3 ,
  .posts-expand .post-body h4  {
    pointer-events: auto;
    color: #2c3e50;
  }
  .posts-expand .post-body h1:before
  .posts-expand .post-body h2:before
  .posts-expand .post-body h3:before
  .posts-expand .post-body h4:before
  .posts-expand .post-body h5:before
  .posts-expand .post-body h6:before{
    display: none;
  }
  .posts-expand .post-body h2 {
    padding-bottom: 0.7em;
    border-bottom: 1px solid #ddd;
  }
  .posts-expand .post-body h3 {
    line-height: 1.2;
    position: relative;
  }
}
/*手机端显示设置信息*/
@media (max-width: 767px)
{
  /*手机端代码行上text文档设置*/
  .highlight figcaption{
    font-size: 12px;
  }
  /*手机端显示代码行数背景设置*/
  .highlight .gutter pre{
    padding-left: 2px;
  }

/*手机端显示代码行数字体大小*/
.highlight, pre{
    font-size: 10px;
  }
/*手机端显示代码字体大小*/
.code span{
  font-size: 12px;
}
div#comments.comments.v{
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.comments{
    margin: 20px 10px 0;
  }
}

/*手机适配文章底部信息*/
@media (max-width: 767px) {
  .main{
    padding-bottom: 130px;
  }
  .footer{
    font-size: 12px;
  }
  .read-over{/*本文阅读结束*/
    text-align: center;
    margin-top: 20px;
    color: #ea103d91;
    font-size: 12px;
  }
  .share_reward{/*打赏*/
    font-size: 12px;
    padding: 10px 0;
    margin: 5px auto;
    width: 90%;
    text-align: center;
  }
  #rewardButton {
    margin: 15px auto;
  }
  #rewardButton span {/*打赏*/
    display: inline-block;
    width: 50px;
    height: 35px;
  }
  #QR{
    padding-top: 5px;
  }
  #QR a{
    border:0;
  }
  #QR img{
    width: 60px;
    display: inline-block;
    margin: 0.8em 2em 0 2em;
  }
  .post-copyright{
    padding: .1em .5em;
    margin: 0em 0 0;
    border-left: 2px solid #ff1700;
  }
  .post-copyright li{
    font-size: 13.5px;
  }
  .posts-expand .post-tags{
    margin-top: 10px;
    font-size: 8px;
  }
  .post-nav-item a{
    font-size: 12px;
    line-height: unset;
  }
  .pagination{/*分页按钮*/
    margin: 30px;
    text-align: center;
    border-top:0px;
  }
  /*TopX适应手机屏幕设置*/
  #top p{
    font-size: 12px;
    display: block;
  }
  .post-body .note{
    margin: 10px auto;
    font-size: 14px;
  }
  .post-body .note.info p{
    font-size: 13px;
  }
  .post-body .tabs .tab-content .note {
    margin: 10px auto;
    font-size: 14px;
  }

}
@media (max-width: 767px) {

  /* 手机端文章布局 */
  .post {
    margin-bottom: 20px;
    padding: 10px;
  }

  /*手机友链页*/
  .card{
    width: 88%;
    padding: 3px 20px;
    margin-bottom: 0rem;
  }
  #links {
    margin-top: 3rem;
  }

  /*移动端 本地搜索框美化*/
  .local-search-popup{
    top: 10%;
    margin: 10px 35px;
    width: 80%;
    height: 60%;
  }
  .local-search-popup .search-icon, .local-search-popup .popup-btn-close {
    color: #15a1d8f2;
  }
  .local-search-popup .local-search-input-wrapper input {
    padding-left: 10px;
    height: 21px;
    background-color: rgb(255, 255, 255);
  }
  .local-search-popup .popup-btn-close {
    border-left: none;
  }
  .local-search-popup p.search-result{
    padding-bottom: 1.2em;
    font-size: 13px;
    margin: .1em 0 .5em;
  }
  .local-search-popup a.search-result-title{
    font-size: 14px;
  }

}

/* 适配手机样式 end  ------------------------> */

注意：样式不保证完全兼容，请酌情调整

其它美化文章可参考：

hexo 博客界面美化2.0