VPS爱客--vps优惠_服务器优惠_vps评测

求助一个wordpress博客自动适应手机终端的方法 2020-05-03 分类:VPS综合讨论 评论(0)


    我有两个wordpress博客,一个可以适应手机终端,别外一个在手机终端下版面会错乱,请大佬们指点一个方法,谢谢了。

    手机终端下正常的模板:https://jiayu.mybabya.com/
    手机终端下版面错误的模板:https://www.myzhenai.com.cn/

    求助一个wordpress博客自动适应手机终端的方法  			  				2020-05-03   												分类:VPS综合讨论   								评论(0)

网友回复:注册 看我签名, 找这美女可解决问题 Ruclinux 用前端框架吧 天空是连着的,如果我们也能各自发光的话,无论距离有多远,都能看到彼此努力的身影。 一言 豆浆 主题没有适配移动端,你懂代码的话可以自己改,不然还是换个主题吧 1tv 换个好主题就行了,牛逼点自己撸一个 夕日 换主题省事 贰拾壹 word-wrap: break-word 文章内容,也可能是摘要,你的图太模糊了,看不清。 反正那个 div 加上上面的样式就行 大侠饶命 谢谢您的回复,可以麻烦您看一看我的网站吗? 我试过在style.css文件里改,但是没效果。谢谢您了 blink 移动桌面分开用两个主题,或者你用下WP-UTF8-Excerpt这个插件限制一下简介字数 Ruclinux .article-container article p{   /* float: left; */   margin: 0;   font-family: “Titillium Web”, sans-serif;   color: #515151;   font-size: 0.983em;   line-height: 1.3;   margin-top: 3px;   word-wrap: break-word; }复制代码 把浮动注释掉,加最后一行就行了啊 注册 谢谢您的指点,我晚上回去修改,谢谢了 注册 不用这么客气,水论坛举手之劳而已 Ruclinux 不懂怎么分开两个主题,也不想用太多插件,所以就想自己动手折腾,谢谢您的回复 blink .article-container article p {     margin: 0;     display: block;     font-family: “Titillium Web”, sans-serif;     color: #515151;     font-size: 0.983em;     line-height: 1.3;     margin-top: 3px;     overflow-wrap: break-word; } 复制代码 这一段这样改,删去float:left,然后加 overflow-wrap: break-word Ruclinux 谢谢您的回复指点。 流河旱树 手动做个移动端定制页面就行了,或者换个带移动端的主题 Ruclinux 问题是不会 BlueSkyXN 那就换主题咯。。或者取消摘要 Ruclinux 首先先谢谢你们了,但是我调试了好久还是没有解决,可以麻烦你们再帮忙看看吗? 谢谢你们了。   @blink  @流河旱树 我修改了css/framework.css, 其中 width:auto; margin:auto; 是我添加的。 html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ width: auto; margin: auto; } body { margin: 0 auto; width: auto; } .clearfix:after { content: “0A0”; display: block; width: auto; margin: auto; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .clearfix { display: block; width: auto; margin: auto;} .clearfix { display: block; width: auto; margin: auto; } html { font-size: 16px; font-family: “HelveticaNeue”, “Helvetica Neue”, Helvetica, Arial, sans-serif; } /* 这一行还没有修改 */ 复制代码 接着我修改了style.css,其中 width:auto; margin:auto; 是我添加的。 /* Main Content Background Color */ #main-content {   background: #f6f6f6;   padding-top: 1px;   margin-top: 0px;   margin: auto;   width: auto; .article-container article p { /*  float: left; */   margin: auto; /* */   font-family: “Titillium Web”, sans-serif;   color: #515151;   font-size: 0.983em;   line-height: 1.3;   margin-top: 3px;   word-wrap: break-word;  /*这个是添加的 */   overflow-wrap: break-word;  /*这个是添加的 */ } }复制代码 BlueSkyXN 不应该啊,我在你网站上F12测试了的 没问题啊 注册 我修改完后在手机上进行打开了,还是没变。 注册 我的步骤是这样的,修改完css后,我将博客缓存和本地缓存先删除了,然后再手机上打开,但是却没有效果,太麻烦您了。 Ruclinux 我这看是正常的 自适应了 你尝试手机上用隐身模式看看 Ruclinux 这是我另外一个自适应的博客,像这样的用手机打开就很正常。但正在修改的这个博客在同样的手机下面还是会排版错乱。麻烦并谢谢您了。 流河旱树 我大致看了下 你这个是主题本身就没有任何自适应… 会复杂些, 我帮你简单设计了下页面(如下图) 假设手机的breakpoint是550px的话 @media only screen and (max-width: 550px) { body {         overflow-x: hidden; } #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {     width: calc(95vw – 2em); } #branding img {     width: 100%;     object-fit: cover; } #access {     display: flex;     width: 100%; } #container {     width: 100%; } .format-gallery .gallery-thumb, .category-gallery .gallery-thumb {     float: none;     display: flex;     justify-content: center; } #content {         margin: 0; } #main {     display: flex;     flex-direction: column; } #content, #content input, #content textarea {     width: 100%; } #primary, #secondary {     width: 100%; } }复制代码 Ruclinux 谢谢您了,有内地朋友要来海南,我要接待,这事只能迟点再调试了,谢谢了

未经允许不得转载:VPS爱客 » 求助一个wordpress博客自动适应手机终端的方法 2020-05-03 分类:VPS综合讨论 评论(0)
分享到: 更多 (0)