首页线报酷-归档文章正文

Zblog ue编辑器自适应手机端代码

线报酷 0 举报

本站和线报酷宝盒采用的是zblog程序,使用了默认的ue编辑器,但是在手机端里面部分功能并不是自适应的,我们只需要修改3个地方就可以很好的适应手机端,随便进行下备份!


zb_users/plugin/UEditor/themes/iframe.css 文件修改的是编辑框默认的CSS样式,因为我没有什么药改的,就保证图片最大尺寸不要错过屏幕就可以了

img{max-width: 95%;}


zb_users/plugin/UEditor/themes/default/css/ueditor.css 文件修改的是弹出窗的CSS样式,修改了下上传图片,上传视频,上传附件,符号等弹窗的宽度,确保不超过屏幕

@media screen and (max-width: 950px){
#edui114_body,#edui114_content,#edui119_body,#edui119_content,#edui124_body,#edui124_content,#edui129_body,#edui129_content,#edui134_body,#edui134_content,#edui137_body,#edui137_content{width: 500px !important;}
}

@media screen and (max-width: 800px){
#edui114_body,#edui114_content,#edui119_body,#edui119_content,#edui124_body,#edui124_content,#edui129_body,#edui129_content,#edui134_body,#edui134_content,#edui137_body,#edui137_content{width: 400px !important;}
}


zb_users/plugin/UEditor/themes/default/dialogbase.css 文件修改的是弹出窗内部ifame的样式,我修改了下上传图片缩略图的位置

@media screen and (max-width: 950px){
#tabbody .right #preview{width: 100px;height: 100px;}
#tabbody .right{margin-top: 140px;}
#tabbody .left{margin-top: 15px;}
}

@media screen and (max-width: 800px){
#tabbody .right #preview{width: 100px;height: 100px;}
#tabbody .right{margin-top: 140px;}
#tabbody .left{margin-top: 15px;}
}


image.png

image.png

image.png

image.png

线报酷内部交流互动版块 (已有0条评论)

欢迎您发表评论: