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

ordanj 发表于 Dev

奥丹杰

我到处都在寻找合理的答案，但是找不到。我有一个相对简单的响应式网站并且它在每个屏幕上都能正常工作，但低于768像素除外。由于某些原因，尽管一切都设置为100％，但身体仍会拉伸，并且会进行一些水平滚动。身体是唯一看起来比视口更宽的部分。我有一个典型的重置样式表，以清除所有填充和边距。我没有忘记设置meta name =“ viewport”标签或初始比例。老实说，我不知道发生了什么。平板电脑上的布局很好。如果我将手机转到横向，那是正确的。只有肖像才能使身体在视口外拉伸约15像素，并且我可以进行一些水平滚动。右边只有空白。您可以查看手机上的链接以直接查看问题。有想法该怎么解决这个吗？

布局很简单

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

这是贝壳

<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;
    }
}

乔罗德

固定宽度为24em .footer-text

删除它，你会很好。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-10-28

我来说两句

0 条评论

登录后参与评论

上一篇：ANSI转义序列保存/恢复光标位置支持

TOP 榜单

文章

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

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

UITableView的项目向下滚动后更改颜色，然后快速备份

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Mac OS X更新后的GRUB 2问题

验证REST API参数

Java Eclipse中的错误13，如何解决？

带有错误“ where”条件的查询如何返回结果？

ggplot：对齐多个分面图-所有大小不同的分面

尝试反复更改屏幕上按钮的位置 - kotlin android studio

如何从视图一次更新多行（ASP.NET - Core）

计算数据帧中每行的NA

蓝屏死机没有修复解决方案

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

离子动态工具栏背景色

VB.net将2条特定行导出到DataGridView

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

在Windows 7中无法删除文件（2）

python中的boto3文件上传

当我尝试下载 StanfordNLP en 模型时，出现错误

Node.js中未捕获的异常错误，发生调用