Question

我到处寻找合理的答案，但我无法找到它。我有一个相对简单的响应website，它在每个屏幕上工作正常，除了低于768px。出于某种原因，尽管一切都被设置为100％，但身体会被拉伸并且我得到一些水平滚动。身体是唯一看起来比视口宽的部分。我有一个典型的重置样式表来清除所有填充和边距。我没有忘记设置meta name =＆＃34; viewport＆＃34;标签或初始规模。老实说，我不知道发生了什么。平板电脑上的布局很好。如果我把手机变成风景，它甚至是正确的。仅在肖像中，身体在视口外伸展约15px并且我有一些水平滚动。右侧只有空白区域。您可以查看手机上的链接，直接查看问题。有想法该怎么解决这个吗？

布局非常简单

<body>
  <div data-ng-include="'app/layout/shell.html'">
  </div>
</body>

这是shell

<header class="fixed-header-shell" data-ng-include="'app/layout/topnav.html'"></header>
<div class="sections-shell" data-ng-view></div>
<footer class="footer-shell" data-ng-include="'app/layout/footer.html'"></footer>

所有外壳都设置为100％宽度，没有右边或左边的填充。这是整个页面css供参考。

@import "colors";
@import "fonts";
@import "reset";
@import "init";


/***********************
        Variables
************************/
/*Header*/
@defaultHeaderHeight:        110px;
@defaultNavHeight:           50px;
@defaultHeaderPadding:       @defaultHeaderHeight/2 - @defaultNavHeight/2;
@defaultHeaderSidePadding:   5.0%;

/*Footer*/
@defaultFooterHeight:        70px;

/*Section*/
@defaultSectionPadding:      60px;
//@defaultSidePadding:       5.0%;
@defaultSidePadding:         0px;
@defaultSectionHeaderMargin: 35px;
@mediumSidePadding:          2.5%;
@smallSidePadding:           1.5%;
@sectionShellWidth:          100%;
@defaultSectionWidth:        55%;


/***********************
        Mixins
************************/

.Clickable 
{
    &:hover 
    {
        text-decoration:none;
        cursor: pointer;
        color: @primaryAccent;
    }
    &:visited 
    {
        text-decoration:none;
    }
    &:active 
    {
        text-decoration:none;
    }
    &:link 
    {
        text-decoration:none;
    }
}

.Button
{
    padding: 8px;
    background-color: @divider;
    color: @primaryDark;
    border-style: solid;
    border-radius: 3px;
}

.Image(@imageURL, @radius, @size) 
{
    background-image: url(@imageURL);
    -webkit-border-radius:@radius;
       -moz-border-radius:@radius;
            border-radius:@radius;
    background-position: center;
    background-size: @size @size;
    width: @size;
    height: @size;
}

/***********************
        Body
************************/

body 
{
    background-color: @primaryBackground;
    width: 100%;
}


/***********************
        Shells
************************/

.fixed-header-shell 
{
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 10;
    background-color: @primaryBackgroundDark;
}

.sections-shell
{
    width: 100%;
    margin-top: @defaultHeaderHeight;
    min-height: 900px;
    background-color: @primaryBackground;
}

.footer-shell
{
    width: 100%;
    background-color: @primaryBackgroundDark;
}

/***********************
        Blocks
************************/

.fixed-header-block 
{
    background-color: @primaryBackgroundDark;
    height: @defaultHeaderHeight;
    clear: both;
    width: 100%;
    //padding-left: @defaultHeaderSidePadding;
    //padding-right: @defaultHeaderSidePadding;
}

.section-block
{
    background-color: @primaryBackground;
    width: @defaultSectionWidth;
    padding-top: @defaultSectionPadding;
    padding-bottom: @defaultSectionPadding;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    border-style: solid;
    border-bottom-width: 1.5px;
    border-bottom-color: @divider;

}

.footer-block 
{
    background-color: @primaryBackgroundDark;
    text-align: center;
    padding-top: @defaultSectionPadding;
    padding-bottom: @defaultSectionPadding;
    height: @defaultFooterHeight;
}



/***********************
        Header
************************/

.fixed-header-logo 
{
    .HeadingLogo;
    .Clickable;
    height: @defaultHeaderHeight;
    line-height: @defaultHeaderHeight;
    //margin-left: @defaultHeaderSidePadding;
    text-align: left;
    color: @white;
}

.fixed-header-nav 
{
    height: @defaultHeaderHeight;
    //margin-right: @defaultHeaderSidePadding;
    text-align: right;
}

.fixed-header-nav-link 
{
    .Clickable;
    .HeadingLink;
    line-height: @defaultHeaderHeight;
    margin-left: 18px;
    //margin-right: 9px;
    color: @white;
}

/***********************
        Footer
************************/

.footer-link
{
    .Clickable;
    text-align: center; 
    .fa
    {
        .Clickable;
        color: @secondaryTextWhite;
        width: 5em;
        line-height: @defaultFooterHeight / 2;
    }
}

.footer-text
{
    .FooterText;
    color: @secondaryTextWhite;
    margin: auto;
    line-height: @defaultFooterHeight / 2;
    width: 24em;
}


/***********************
        Sections
************************/

.section-block-text
{
    .BodyText;
    color: @text;
    margin-top: @defaultSectionHeaderMargin;
}

.section-header
{
    .SectionHeader;
    text-align: left;
    color: @text;
}

.section-sub-header
{
    .SectionSubHeader;
    margin-top: @defaultSectionHeaderMargin / 2;
    color: @text;
}


/***********************
        Columns
************************/

.col
{
    display: block;
    float:left;
    margin: 0 0 0 0;
}

.span_2_of_2
{
    width: 100%; 
}
.span_1_of_2
{
    width: 50%;
}



/***********************
        Grouping
************************/

.group:before,
.group:after 
{
    content:"";
    display:table;
}

.group:after 
{
    clear:both;
}

.group
{
    zoom:1; /* For IE 6/7 */ 
    width: 95%;
    margin: auto;
}


/***********************
        Intro
************************/

#intro 
{
    background-color: @primaryBackgroundDark;
    text-align: center;
    .section-block 
    {
        border-style: none;
        background-color: @primaryBackgroundDark;
    }

}

#intro-avatar 
{
    .Image("../../content/images/profile2.png", 9999px, 200px);
    margin: auto;
}

#intro-tagline 
{
    .HeadingTagline;
    color: @white;
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/***********************
        Posts
************************/

#details
{
    border-style: none;
}

.post-link
{
    .Clickable;
}

.post-date
{
    text-align: left;
    color: @secondaryText;
    .PostDate
}

.post-title
{
    .PostTitle;
    .Clickable;
    margin-top: 5px;
    text-align: left;
    color: @text;
}

.post-full-title
{
    .PostTitle;
    margin-top: 5px;
    text-align: left;
    color: @text;
}

.post-text
{
    .BodyText;
    margin-top: 5px;
    text-align: left;
    color: @text;
}

.post-full-text
{
    .BodyText;
    margin-top: 5px;
    padding-bottom: 50px;
    text-align: left;
    color: @text;
    border-style: solid;
    border-bottom-width: 1.5px;
    border-bottom-color: @divider;
}

.post-navigation
{
    .Clickable;
    .Button;
    .BodyText;
    display: inline-block;
    margin-top: 50px;
}


/***********************
        Projects
************************/

.project-section
{
    text-align: left;
}

.project-title
{
    .PostTitle;
    margin-top: 5px;
    text-align: left;
    color: @text;
}

.project-text
{
    .BodyText;
    margin-top: 15px;
    text-align: left;
    color: @text;
}

.project-image
{
    width: 100%;
    //height: 450px;
    border-color: @primaryLight;
    border-width: 2px;
    border-style: solid;
    object-fit: contain;
    object-position: center;
}

.project-link
{
    .Clickable;
}

/***********************
        Contact
************************/

#contact
{
    .fa
    {
        color:@primaryAccent;
        margin-right: 10px;
        width: 24px;
    }
}


/***********************
        Links
************************/

#links
{
    background-color: @primaryBackgroundOff;

    h3
    {
        color:@primaryDark;
    }

    a
    {
        .Clickable;
        color: @primaryDark;
        text-align: center;
    }

    #facebook
    {
        .Image("../../content/images/facebook.png", 9999px, 75px);
        margin: auto;
    }

    #linkedin
    {
        .Image("../../content/images/linkedin.png", 9999px, 75px);
        margin: auto;
    }

    #google
    {
        .Image("../../content/images/google.png", 9999px, 75px);
        margin: auto;
    }

    #github
    {
        .Image("../../content/images/github.png", 9999px, 75px);
        margin: auto;
    }
}

.resume-link
{
    margin-top: 1.5em;
    .Clickable;
    .Button;
    .BodyText;
    display: inline-block;
}



/***********************
        Media Queries
************************/

@media screen and (max-width: 1024px)
{
    .fixed-header-block
    {
        //padding-right: @mediumSidePadding;
        //padding-left: @mediumSidePadding;
    }

    .section-block
    {
        //padding-right: @mediumSidePadding;
        //padding-left: @mediumSidePadding;
        width: 70%;
    }
}

@media screen and (max-width: 800px)
{
    .fixed-header-shell 
    {
        position: relative;
    }

    .fixed-header-nav
    {
        text-align: center;
        height: @defaultHeaderHeight / 3;
    }

    .fixed-header-nav-link
    {
        line-height: @defaultHeaderHeight / 3;
        margin-left: 15px;
        margin-right: 15px;
    }

    .fixed-header-logo
    {
        text-align: center;
        line-height: @defaultHeaderHeight * 2 / 3;
        height: @defaultHeaderHeight * 2 / 3;
    }


    .fixed-header-block
    {
        //padding-right: @smallSidePadding;
        //padding-left: @smallSidePadding;
    }

    .sections-shell
    {
        margin-top: 0;
    }

    .section-block
    {
        //padding-right: @smallSidePadding;
        //padding-left: @smallSidePadding;
        width: 90%;
    }

    .col
    { 
        margin: 0 0 0 0%;
    }

    .span_2_of_2, 
    .span_1_of_2, 
    {
        width: 100%;
    }

    #intro-tagline 
    {
        font-size: 3.4em;
    }
}

@media screen and (max-width: 480px)
{
    #intro-tagline
    {
        font-size: 3em;
    }
}

Answer 1

.footer-text

上的固定宽度为24em

删除它，你会很好。

仅在移动设备上，机身宽度超过100％

1 个答案: