Question

我尝试为移动用户简化我的网站。我已经通过在 @media屏幕和（max-width：480px）下添加css来实现针对移动设备的调整。

我成功但只在所有帖子页面上。主页不会遵循我在所有帖子页面上制作的css规则。

This is a post page screenshot before css is added和this is its screenshot after I added the css.同时，这是the homepage screenshot before并添加了after css。我添加了css实现后，主页没有改变。

CSS

@media screen and (max-width:480px) {
.header-logo {width: 62%; float:left; margin-left: 58px;}
.navigation-item {margin-left: -15px;}
.hometab {height: 42px; padding-top:4px;}
.main-navigation-items {position: relative; width: 97%; height: 32px; margin-top:-27px;}
.main-social {height: 20px; display: inline-block;}
.mainfl {height: 42px; padding-top: 0;}
i.fa-plus-square {size:500px;  margin-top:-40px;}
i.fa-facebook-square {display: none;}
i.fa-google-plus-square {display: none;}
i.fa-twitter-square {display: none;}
}

HTML

<div class='header-logo' id='header-brand'>
<div class='navigation-item'>
    <ul class='main-navigation-items top-menu' id='main-navigation-items'>
        <li><a class='hometab' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></li>

                <b:if cond='data:blog.pageType != &quot;http://fourthblogtester.blogspot.com/?m=1&quot;'>
         <ol class='main-social'>
            <li><a class='mainfb' href='#' itemprop='url' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook-square'/></a></li>
            <li><a class='maingp' href='#' itemprop='url' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus-square'/></a></li>
            <li><a class='maintw' href='#' itemprop='url' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter-square'/></a></li>
            <li><a class='mainfl' href='#' itemprop='url' rel='nofollow' target='_blank' title='Follow Us'><i class='fa fa-plus-square'/>Follow</a></li>
         </ol>
      </b:if>
    </ul>
</div>

感谢你的帮助。非常感谢你。

Answer 1

经过如此多的考验后，问题得到了解决。错误。 Before, it looked like this和NOW it looked like this。

以下是我使用的调整

我查看了CSS部分。在我的模板中，有两组用于总体布局的css实现，即全局响应和 CSS项目响应。

我复制了我在CSS Item Responsive下创建的css，代码如下：

/* CSS Item Responsive */

@media screen and (max-width:480px) {
h1.post-title {font-size: 20px;
   margin-top: -20px;}
.header-logo {width: 62%;
   float:left;
   margin-left: 58px;}
.homepage .mobile-menu .hamburger{
   float: left;
   margin-left: -15px;}
html, body {max-width: 100%;
   overflow-x: hidden;}
.post-body {width: 108%;
   text-align: justify;
   text-justify: inter-word;
   margin-left: -20px;
   margin-right: 5px;}
.navigation-item {margin-left: -15px;}
.hometab {height: 42px; padding-top:4px;}
.main-navigation-items {position: relative; width: 99%;
   height:32px; margin-left: -6px;
   margin-top:-27px;}
.main-social {height:20px;display: inline-block;}
.mainfl {height: 42px;padding-top: 0;}
i.fa-plus-square {size:500px;;margin-top:-40px;}
i.fa-facebook-square {display: none;}
i.fa-google-plus-square {display: none;}
i.fa-twitter-square {display: none;}
}

我粘贴在Global Responsive下面的代码之上。导航栏更正了其宽度并居中。不过，这些错误仍然存在：

＆＃39;按照＆＃39;标签低于黑色导航栏的一半。
黑色导航栏的位置正确。
标题徽标仍然超大。
每个摘要后的元素相互重叠。
整个帖子摘要在移动浏览器右侧被截断。

所以，我反复调整并调整了属性＆＃39;价值观，直到我得到完美的布局。此外，我根据需要删除了一些CSS语法。还必须添加帖子摘要css语法。

这是最终的代码：

/* Global Responsive */

.header-logo {width: 62%!important;
   float:left!important;
   margin-left: 58px!important;}
.homepage .mobile-menu .hamburger{
   float: left;
   margin-left: -15px;}
html, body {max-width: 100%;
   overflow-x: hidden;}
.post-summary p {width: 108%;
   margin-left: -20px!important;
   margin-right: 5p!important;}
.navigation-item {margin-left: -15px;}
.hometab {height: 42px; padding-top:4px;}
.main-navigation-items {position: relative; width: 99%;
   height:32px; margin-left: -5px;
   margin-top:-27px!important;}
.main-social {height:20px;display: inline-block;}
.mainfl {height: 42px;padding-top: 0;}
i.fa-plus-square {size:500px;;margin-top:-40px;}
i.fa-facebook-square {display: none;}
i.fa-google-plus-square {display: none;}
i.fa-twitter-square {display: none;}
}

如何让我的博客移动主页识别我的CSS实现？

1 个答案: