layui 中有 hover伪元素，在移动端中点击后不能失效。 可以直接替换hover效果 。

现在顺带附一个原生的rem解决方案和初始化的css

js响应式rem

      (function (w, d) {
        function setSize() {
          var screenWidth = d.documentElement.clientWidth;
          var currentFontSize = (screenWidth * 100) / 750;
          d.documentElement.style.fontSize = currentFontSize + 'px';
          d.documentElement.style.opacity = 1;
        }
        w.addEventListener('resize', setSize);
        w.addEventListener('pageShow', setSize);
        w.addEventListener('DOMContentLoaded', setSize);
      })(window, document);

css样式：

* {
  box-sizing: border-box;
}
.m0auto {
  margin: 0 auto;
}
.ml40 {
  margin-left: 0.4rem;
}
.mt32 {
  margin-top: 0.32rem;
}
.mt40 {
  margin-top: 0.4rem;
}
.mt24 {
  margin-top: 0.24rem;
}
.mt64 {
  margin-top: 0.64rem;
}
.px40 {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.p32 {
  padding-left: 0.32rem;
  padding-right: 0.32rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}
.py48 {
  padding-top: 0.48rem;
  padding-bottom: 0.48rem;
}
.py120 {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
.mb48 {
  margin-bottom: 48px;
}
.fs28 {
  font-size: 0.28rem;
}
.fs32 {
  font-size: 0.32rem;
}
.fs48 {
  font-size: 0.48rem;
}
.fs24 {
  font-size: 0.24rem;
}
.text-center {
  text-align: center;
}
.bt0 {
  border-top: 0.01rem solid rgba(0, 0, 0, 0);
}
.bold {
  font-weight: bold;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.bgfff {
  background: #fff;
}
.bgf5f5f5 {
  background: #f5f5f5;
}
.w686 {
  width: 6.86rem;
}
.br16 {
  border-radius: 0.16rem;
}
.flex {
  display: flex;
}
.justify-center {
  justify-content: center;
}
.items-center {
  align-items: center;
}

/* ------下面是layui的公共样式更改---- */
html {
  opacity: 0;
  transition: opacity 0.1s linear;
}
.layui-input {
  border-color: #d9d9d9 !important;
  border-width: 0.02rem;

  border-radius: 0.08rem;
  height: 0.96rem;
  padding-left: 0.24rem;
  padding-right: 0.78rem;
  font-size: 0.28rem;
  transition: none;
}
.layui-input::placeholder {
  font-size: 0.28rem;
  color: #ccc;
}
.layui-input:focus {
  border-color: #003490 !important;

  box-shadow: 0 0 0.04rem rgba(0, 52, 144, 0.08);
}
.maker-input_iconfont .layui-input {
  padding-left: 0.76rem;
}
.maker-input_img {
  position: absolute;
  left: 0.64rem;
  width: 0.36rem;
  height: 0.36rem;
  top: 50%;
  transform: translateY(-50%);
}

.maker-input_img img {
  width: 0.36rem;
  height: 0.36rem;
  display: block;
}
.maker-input_img .eye_text {
  display: none;
}
.layui-layer-dialog .layui-layer-content {
  word-break: keep-all;
}

.maker-input_close {
  position: absolute;
  right: 0.64rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  width: 0.36rem;
  height: 0.36rem;
}
.maker-input_close img {
  width: 100%;
  height: 100%;
  display: block;
}

.layui-btn {
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem;
  background: #003490;
  border-radius: 0.48rem;
  font-size: 0.32rem;
  position: relative;
  transition: none;
}
.layui-btn::after {
  content: '';
  background: rgba(0, 52, 144, 0.16);
  position: absolute;
  width: calc(100% + 0.16rem);
  height: calc(100% + 0.16rem);
  left: 50%;
  border-radius: 0.48rem;
  top: 50%;
  transform: translate(-50%, -50%);
}
.layui-btn-disabled,
.layui-btn-disabled:active,
.layui-btn-disabled:hover {
  background: rgba(0, 52, 144, 0.16) !important;

  color: #fff !important;
  cursor: not-allowed !important;
  /* opacity: 1; */
}
.maker-input.maker-error {
  position: relative;
}
.maker-input.maker-error .layui-input {
  border-color: rgba(238, 12, 44, 1) !important;
}
.maker-input .error-tips {
  display: none;
  color: rgba(238, 12, 44, 1);
  position: absolute;
  left: 0;
  bottom: -0.36rem;
  line-height: 0.32rem;
  margin-top: 0.04rem;
  width: 100%;
}
.maker-input.px40 .error-tips {
  left: 0.4rem;
  width: calc(100% - 0.4rem - 0.4rem);
}
.maker-input.maker-error .error-tips {
  display: block;
}

/* 全局弹框 */
.maker-common-modal {
  width: 6.6rem;
  border-radius: 0.32rem;
  overflow: hidden;
}
.maker-common-modal .layui-layer-title {
  padding: 0.48rem 0.48rem 0;
  text-align: center;
  font-size: 0.32rem;
  font-weight: bold;
  color: #333333;
  line-height: 0.44rem;
  border: none;
  height: auto;
}
.pt24 {
  padding-top: 0.24rem;
}
.px48 {
  padding-left: 0.48rem;
  padding-right: 0.48rem;
}
.pb32 {
  padding-bottom: 0.32rem;
}
.color333 {
  color: #333;
}
.maker-common-modal .layui-layer-btn {
  margin: 0;
  margin-bottom: 0.48rem;
}
.layui-btn:hover {
  opacity: 1;
}
.layui-btn:active {
  opacity: 0.8;
}
.maker-notificationModal .layui-layer-btn0 {
  width: 5.26rem;
  margin: 0 auto !important;
  display: block;
  height: 0.8rem;
  line-height: 0.8rem;
  background: #003490;
  border-radius: 0.4rem;
  font-size: 0.28rem;
  text-align: center;
  position: relative;
  transition: none;
}
.maker-confirmModal .layui-layer-btn {
  display: flex;

  flex-direction: row-reverse;
}
.maker-confirmModal .layui-layer-btn0 {
  width: 2.48rem;
  margin: 0 auto !important;
  display: block;
  height: 0.8rem;
  line-height: 0.8rem;
  background: #fff;
  color: #ee0c2c;
  border-radius: 0.4rem;
  font-size: 0.28rem;
  text-align: center;
  position: relative;
  transition: none;
  border: 0.02rem solid #ee0c2c;
}
.maker-confirmModal .layui-layer-btn1 {
  width: 2.48rem;
  margin: 0 auto !important;
  display: block;
  height: 0.8rem;
  line-height: 0.8rem;
  background: #fff;
  border-radius: 0.4rem;
  font-size: 0.28rem;
  text-align: center;
  position: relative;
  transition: none;
  color: #333;
  border: 0.02rem solid #d9d9d9;
}
/* border: 2px solid #003490; */

推荐vscode插件

px to rem & rpx & vw (cssrem)