Question

我正在尝试在网站的初始屏幕上隐藏文本内容。如何使用CSS或HTML代码隐藏它？

这是基于perl的脚本，在主页上具有基于html和css的启动画面。这是website。您会看到文本在移动设备上混乱了。

我尝试使用以下代码在移动设备上隐藏文本：

@media only screen and (max-width: 800px) {
    #content {
       display: none;
    }
}

输入此代码：

</br>


    <div id="content">
    <div class="container" style="position: relative;top: 50%; transform: translateY(15%)">
        <div class="prompic" style="">
            <a href="<TMPL_VAR site_url>/?op=upload_form">&nbsp;</a>
        </div>  
            <div class="splashbar promsign">
            <a href="<TMPL_VAR site_url>/register.html">
                <div class="col">
                    <div class="pheader">
                        <span><img src="<TMPL_VAR site_url>/images/icon_sup_blue.png"></span>
                        <span>SignUp</span>
                    <div class="clear">
                Whenever you need to send a file that is too large for e-mail, <b><TMPL_VAR site_name></b> can help. If you need secure remote storage capacity for off-site backups, <b><TMPL_VAR site_name></b> offers best solutions for you.
                </div>
               </div>
            </div>
            </a>
        </div>
        <div class="splashbar promprofit">
            <a href="<TMPL_VAR site_url>/make_money.html">
                <div class="col">
                    <div class="pheader">
                        <span><img src="<TMPL_VAR site_url>/images/icon_profit_blue.png"></span>
                        <span>Become Affiliate</span>
                    <div class="clear">
                    With <b><TMPL_VAR site_name></b> you can earn money by promoting your files on the external resources. Just register and enjoy being a part of one or more of our affiliate programs!
                </div>
            </div>
        </div>
            </a>
        </div>
            <div class="clear"></div>       
    </div>
        <div class="col-12 lft splashHldr">
        <a href="https://play.google.com/store/apps/details?id=net." target="_new"><img src="/images/android.png" height="61"></a>
        <a href="/desktop_file_manager_mac.zip" target="_new"><img src="/images/mac_os.png" height="61"></a>
        <a href="/desktop_file_manager_win.zip" target="_new"><img src="/images/windows.png" height="61"></a>
    </div>
    </br>
        <div id="content" style="width: 980px">
                        <div class="col">
                            <div class="clear">
                            </div>
                            </div>
                            <b><TMPL_VAR site_name></b> is a cloud-based file hosting provider. We offer online cloud storage/remote backup capacity, sophisticated uploading and downloading tools. 
                        </div>
                </a>

    <style>
    body{background-image:url(../images/bg.png); -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
    #header{background:none!important; border:0px!important;}
    footer{background:none; border:0px;position:absolute;bottom:0px;}
    footer .container1{display:none;}
    #mainmenu ul li a{color:#fff;}
    .copyright{display:block;}
    .prompic{margin: 50px auto 30px;}

    @media (min-width: 320px) and (max-width: 480px) {
    #container{margin:0px auto;}
    .prompic{margin: 10px auto 10px;}
    }
    @media (min-width: 600px) and (max-width: 800px) {
    #container{margin:0px auto;}
    }

    @media only screen and (max-width: 800px) {
    #content {
       display: none;
    }
}
    </style>

我希望将这些凌乱的文本隐藏在移动设备上，但不会产生任何效果。如何正确执行？

Answer 1

min-width: 800px选择宽度为或更高 800像素的屏幕。请尝试使用max-width：

@media only screen and (max-width: 800px) {
...

Answer 2

`https://codepen.io/kunalvijan/pen/oRmRwp`

我为您创建了一个虚拟密码笔。只需检查一下解决方案是否适合您

如何仅为移动设备或移动视图隐藏div类文本？

2 个答案: