logo标签列表

Bootstrap 根据移动端布局更改 CSS

htmlcsstwitter-bootstrap
3
我可以帮您翻译成中文。以下是需要翻译的内容：

我想知道如何根据不同的屏幕尺寸在bootstrap中更改我的网页的CSS，因为我想要改变文本大小和图像大小，但我不知道怎么做，谢谢。

这是我的代码：

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
   <link rel="stylesheet" href="css/onepage-scroll.css">



    <meta charset="UTF-8">
    <title>Summa</title>



   <!-- Fuentes -->
   <link href='http://fonts.googleapis.com/css?family=Sniglet' rel='stylesheet' type='text/css'>
   <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
   <link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css'>
   <link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet"> 


    <!-- Fuentes final -->

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
    <link rel="stylesheet" href="estilos.css">
           <link rel="stylesheet" href="css/hover-min.css">









<body>



        <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

      <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="imagenes/icono.png" 
        style="width: 25px; height: 25px; ">
      </a>
    </div>
  </div>
</nav> 
      <div class="main">

      <header> 




  <section>
    <div class="homepage-hero-module">
       <div class="video-container">
        <div class="filter" ></div>
        <video autoplay loop class="fillWidth">
            <source src="videos/Noted.mp4" type="video/mp4" />

        </video>
        <div class="poster hidden">
            <img src="imagenes/groot.gif" alt="">
        </div>
    </div>

    </div>

   <div class="col-md-12" id="logo">
<img class="center-block img-responsive" src="imagenes/logo.png" >

     <a ><span></span></a>
    </div>
</section>
   </header> 





    <section class="container-fluid fullscreen">
    <div class="col-md-12" >
      <h3 id="colorletra">Brindamos soluciones y conectamos empresas </h3>
      <h4 id="colorletra2">Te invitamos a conocer nuestras especialidades y demas servicios</h4>
      </div>

      <div class="col-md-4 col-xs-4" id="colorletra3"><h2>Mantenimiento</h2></div>
      <div class="col-md-4  col-xs-4" id="colorletra3"><h2>Soporte</h2></div>
      <div class="col-md-4  col-xs-4" id="colorletra3"><h2>Venta</h2></div>

      <div class="col-md-4  col-xs-4 hvr-pulse-grow" ><img src="imagenes/settings.svg" class="img-responsive center-block" id="tamanoicono"></div>
      <div class="col-md-4  col-xs-4 hvr-pulse-grow" ><a href="login.html"><img src="imagenes/message.svg" class="img-responsive center-block" id="tamanoicono"></a></div>
      <div class="col-md-4  col-xs-4 hvr-pulse-grow" ><img src="imagenes/credit-card.svg" class="img-responsive center-block" id="tamanoicono"></div>


      <div class="col-md-4 col-xs-4" id="colorletra4"><h4>Ofrecemos diferentes planes de mantenimiento para sus productos</h4></div>
      <div class="col-md-4  col-xs-4" id="colorletra4"><h4>Verifique el estado de sus productos online y envie dudas o consultas.</h4></div>
      <div class="col-md-4  col-xs-4" id="colorletra4"><h4>Adquiera en linea cualquiera de nuestros productos por medio de nuestra tienda interactiva</h4></div>





     </section>

     <section class="container-fluid talleres fullscreen">




       <div class="col-md-6 col-xs-6">
     <h1 id="somos">Quienes somos?</h1></div>
    <div class="col-md-6 col-xs-6"><h4 id="colorletra5">Ingeniería Integrada, nace en el año 2004 como una iniciativa de un grupo de profesionales del sector de las telecomunicaciones de crear empresa y dar mantenimiento predictivo, preventivo y correctivo, a equipos de telecomunicaciones y tarjetas; Con el tiempo fue ampliando sus servicios a equipos de Energía, Radio y Televisión hasta lograr en el año 2005 cubrimiento en estaciones de comunicaciones celulares.
Con la experiencia y equipos de última tecnología fuimos irrumpiendo en otros sectores de la economía nacional logrando abarcar otros mercados como el transporte masivo, la industria y la salud.
Hemos ido creciendo, logrando reconocimientos a nivel nacional como empresa ingenio en la ciudad de Medellín, dado que contamos con un laboratorio de Innovación y desarrollo que nos ha permitido diseñar equipos especializados, enfocados a la necesidad de cada cliente y distinciones como Gestora en la Participación de Proyectos.</h4>
  </div>




       </section>





       <section id="video1">

    <iframe
      id="JotFormIFrame-62446220115646"
      onload="window.parent.scrollTo(0,0)"
      allowtransparency="true"
      src="https://form.jotformz.com/62446220115646"
      frameborder="0"
      style="width:100%;
      height:539px;
      border:none;"
      scrolling="no">
    </iframe>
    <script type="text/javascript">
      window.handleIFrameMessage = function(e) {
        var args = e.data.split(":");
        var iframe = false;
        if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); }
        if (!iframe)
          return;
        switch (args[0]) {
          case "scrollIntoView":
            iframe.scrollIntoView();
            break;
          case "setHeight":
            iframe.style.height = args[1] + "px";
            break;
          case "collapseErrorPage":
            if (iframe.clientHeight > window.innerHeight) {
              iframe.style.height = window.innerHeight + "px";
            }
            break;
          case "reloadPage":
            window.location.reload();
            break;
        }
        var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;
        if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {
          var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};
          iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");
        }
      };
      if (window.addEventListener) {
        window.addEventListener("message", handleIFrameMessage, false);
      } else if (window.attachEvent) {
        window.attachEvent("onmessage", handleIFrameMessage);
      }
      if(window.location.href && window.location.href.indexOf("?") > -1) {
        var ifr = false;
        if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { ifr = document.getElementById("JotFormIFrame"); }
        var get = window.location.href.substr(window.location.href.indexOf("?") + 1);
        if(ifr && get.length > 0) {
          var src = ifr.src;
          src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;
          ifr.src = src;
        }
      }
      </script>

  </section>








         </div>




<script src="js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
<script src="js/video.js"></script>
 <script src="js/jquery.onepage-scroll.js"></script>



  <script>$(".main").onepage_scroll(); </script>
</body>

</html>

CSS：

#video1{
min-height: 100%;
  min-width: 100%;
  visibility: visible;
}


#logo{
  position: absolute;
height:70%;
  width: 70%;
  display: inline-block;

  margin: auto;
   top: 0; left: 0; bottom: 0; right: 0;



}
#colorletra{
color:darkslategray;
    padding-top: 8%;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 3em;
}
#colorletra2{
color:darkslategray;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 2em;
  padding-top: 10px;
    padding-bottom: 20px;
}
#colorletra3{

    color:darkslategray;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 2em;
    padding-bottom: 20px;
}
#colorletra4{

    color:darkslategray;
 text-align: center;
  text-align-last: center;  
  font-family: 'Raleway', sans-serif;
  font-size: 1em;
    padding-top: 50px;
}
#colorletra5{

    color:whitesmoke;
 text-align: justify;
  text-align-last: center;  
  font-family: 'Raleway', sans-serif;
  font-size: 1.6em;
    padding-top: 50px;
}
#alcentro{
text-align: center;
}
.talleres{

  background-image: radial-gradient(at top left, #3A8FDC 0%, #87D7CD 100%);
  padding: 50px;
  padding-bottom: 200px;
}
#descripciones{
font-family: 'Quicksand', sans-serif;

}
#tamanoicono{
width: 10em;
}
.quien{
    background-image: radial-gradient(at top left, #5C258D 0%, #4389A2 100%);
}
#proy{
font-family: 'Sniglet', cursive;
  font-size: 4em;
  color: aliceblue;
}
#somos{
     color:whitesmoke;
 text-align: center;

  font-family: 'Raleway', sans-serif;
  font-size: 10em;
    padding-top: 25%;

}



a {

    padding-top: 60px;
}
a span {
    position: absolute;
    top: 90%;
    left: 50%;
    width: 40px;
    height: 70px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
}
a span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        -webkit-transform: translate(0, 30px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes sdb {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        transform: translate(0, 40px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
   .fullscreen { height: 100vh; }



.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}
.video-container video.fillWidth {
    width: 100%;
}

我在 Bootstrap 的文档中读到了有关 CSS 的内容，但是我找不到相关信息，请帮忙。

2个回答
3

您可以使用CSS媒体查询使您的网站在不同屏幕尺寸下具有响应性。

在您的代码中，您可以按照以下方式更改#logo的样式。

@media (max-width: 600px){
    #logo {
        font-size: 15px;
    }
}

上述CSS规则适用于最大宽度为600px的屏幕。您可以根据需要更改该值。因此，当您在最大宽度为600px的屏幕上查看您的网站时，#logo的字体大小将为15px。
或者，当链接到HTML文档时，您可以将屏幕大小设置为不同的CSS文件。要做到这一点，您需要在<link>标签中使用media属性指定所需的屏幕大小。
<link rel="stylesheet" media="(max-width: 600px)" href="example.css" />

example.css文件中编写的CSS规则仅适用于最大宽度为600px的屏幕。

这个W3School的教程可能会对你有所帮助：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

祝好！

0
使用媒体查询。根据设备宽度更改宽度。将字体容器的类/ID/元素放在媒体花括号中。
@media (max-width: 600px) {
.facet_sidebar {
    display: none;
}}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接