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)