Html 宽度太小时如何重写网页（只剩下文本）

我在写，我想要这个：

当屏幕宽度太小时，请说您正在通过手机观看。我希望页面上只有文本（导航栏除外），没有背景图像，字体大小应该调整以固定屏幕大小

现在html代码有很多类，所以我的一个想法是在通过手机浏览时禁用这些类（有很多）

我的一些代码：

<section class="box">
   <img src="images/background2.jpg" class="img-responsive hidden-xs" alt="">
   <div class="carousel-caption text-background">
        <h1>Do you love to scuba dive? Are you looking for your next bid dive event?</h1>
        <h5>Look no further. Join ABI and other experienced divers throughout the year as we travel to amazing ocean resort destinations for state of the art diving experiences. Each trip will include
        multiple dives operated by experienced dive companies. All proceeds from these diving excursions will benefit the ABI Endowment Fund<a href="http://endowment.abi.org" target="_blank"> endowment.abi.org</a> 
        Do something you love while supporting the ABI Endowment Fund. Get more information about ABI's upcoming dive excursions.</h5>
   </div>
</section>

你喜欢潜水吗？你在寻找下一个投标跳水项目吗？
别再看了。加入ABI和其他经验丰富的潜水员，我们将前往令人惊叹的海洋度假胜地，体验最先进的潜水体验。每次旅行将包括
由经验丰富的潜水公司进行多次潜水。这些潜水远足的所有收益将受益于ABI捐赠基金
在支持ABI捐赠基金的同时做一些你喜欢的事情。获取更多有关ABI即将进行的潜水远足的信息。

当您使用移动设备时，您可以使用php检测设备是移动设备还是桌面设备。您可以使用类似的方法来检测它是否是手机：

<?php
function isMobile() {
    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
    $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
    $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
    $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
    if ($iphone || $android || $palmpre || $ipod || $berry == true) {
        return true;
    } else {
        return false;
    }
}
if (isMobile()===true) {
    echo "Device is Mobile";
}
?>

---

这只是为了检测设备是移动设备还是桌面设备，如果是移动设备，

if（isMobile（）==true）{

您可以将移动设备的代码放在那里，或者可以包含移动内容的文件。希望这对您有所帮助！

col xs适用于小型设备，请尝试以下几行

 <section class="box">
   <div class="container">
       <div class="col-xs-5">
     you are viewing via mobile phone.
       </div>
    </div>

   <img src="images/background2.jpg" class="img-responsive hidden-xs" alt="">
    <div class="carousel-caption text-background">
    <h1>Do you love to scuba dive? Are you looking for your next bid dive event?</h1>
    <h5>Look no further. Join ABI and other experienced divers throughout the year as we travel to amazing ocean resort destinations for state of the art diving experiences. Each trip will include
    multiple dives operated by experienced dive companies. All proceeds from these diving  excursions will benefit the ABI Endowment Fund<a href="http://endowment.abi.org"  target="_blank"> endowment.abi.org</a> 
    Do something you love while supporting the ABI Endowment Fund. Get more information  about ABI's upcoming dive excursions.</h5>
   </div>
 </section>

您正在通过手机观看。
你喜欢潜水吗？你在寻找下一个潜水项目吗？
不要再往下看了。加入ABI和其他经验丰富的潜水者，我们将在一年中前往令人惊叹的海洋度假胜地，体验最先进的潜水体验。每次旅行将包括
由经验丰富的潜水公司进行多次潜水。这些潜水远足的所有收益将受益于ABI捐赠基金
在支持ABI捐赠基金的同时做一些你喜欢做的事情。获取更多关于ABI即将进行的潜水远足的信息。