求助一个wordpress博客自动适应手机终端的方法

各路大神的回复：

注册： 看我签名， 找这美女可解决问题

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： 谢谢您了，有内地朋友要来海南，我要接待，这事只能迟点再调试了，谢谢了

这几篇文章你可能也喜欢：

• 暂无相关推荐文章