问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css的浮动会导致在手机端body宽度缩减的问题

头像
狂奔的冯
    823

    页面代码如下：

    <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试</title>
        <style>
            body{background-color: #09c;}
            .w{width: 1200px;margin:20px auto;background-color: #fff;}
            .fl{float: left;}.fr{float: right;}
            .clearfix::after{display:table;content:" ";clear:both;}
            .test-box{background-color: #fff;}
        </style>
    </head>
    <body>
        <div class="w clearfix">
            <div class="fl">1111</div>
            <div class="fr">222</div>
        </div>
        
        <div class="test-box">1111</div>
    </body>
</html>

    手机端打开看会发现html和body的宽度缩小了，设置100%也不行。
    11.png
    请问这是哪里造成的问题？

    前端csshtml
    阅读 2k
    2 个回答
    得票最新
    头像
    狂奔的冯
      823

      找到解决方案了，body要设置min-width：1200px;
      真特么的反直觉。

      头像
      陟上晴明
        21.5k145091

        你的问题不在于切换手机端和 min-width,而是你 .w 的 width:1200px;

        如果你要考虑自适应,可以考虑这样写

        // ...上下文
.w{
    width: 100%; // 宽度随body变换
    max-width:1200px; // 最大宽度为1200px
    margin:20px auto;
    background-color: #fff;
}

        如果你一定要问为啥?为啥就是你模拟手机的时候手机屏幕宽度就不知道1200px,整个页面你的 .w 超出了页面,并且没有配置 meta:viewport 禁止页面缩放,
        所以你觉得 .test-box 短了,其实是 .w 长了,长出了屏幕.....

        image.png

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题