1
私はブートストラップで自分のウェブのCSSをどのように変更できるのか知りたいのですが、画面のサイズにもよりますが、テキストサイズとイメージを変更したいのですが、 。 ここにその私のコード：ブートストラップモバイルレイアウトに応じて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%;
}
と私は、ブートストラップドキュメントでCSSについて読んしかし、私はそれについての情報を見つけるいけない、助けてください。