css - 移动端浏览pc站，一个元素撑开页面

问题描述

问 题

pc站没有写viewport

结构如上，header,section宽度设置为100%，header>article宽度为具体像素。
当用移动端浏览页面时，会出现横向滚动条，header,section为屏幕宽度，而article会超出屏幕宽度，

请问如何才能正常显示，如下图

---

    *{
        margin: 0;
        padding: 0;
    }
    header,section{
        width:100%;
        height: 300px;
        background: #09c;
        /*有下拉菜单，不能overflow:hidden*/
        /*overflow: hidden;*/
        /*不能overflow-x:hidden,会出现竖向滚动条*/
        /*overflow-x:hidden;*/
    }
    article{
        width:1200px;
        height:60px;
        background: #58a;
        margin:0 auto;
    }

<header>
    <article></article>
</header>
<section></section>

jsbin效果如下图，手机浏览器类似，article为固定宽度，页面所有主体内容，都放在这个固定宽度内

解决方案

article放在header里面不符合语义化吧
如何要适配还是有个办法，为article加上max-width:100%

article{
        width:1200px;
        max-width:100%;
        height:60px;
        background: #58a;
        margin:0 auto;
    }

这篇关于css - 移动端浏览pc站，一个元素撑开页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！