2

Esta es mi página web https://alexandrawp.herokuapp.com/ como hago para que las ventana se adapte a un celular, miren la ventana de política de privacidad que no se adapta Este es mi codigo

* *, *::before, *::after{ box-sizing: border-box; padding: 0; margin: 0;}
    body {
	background: #000000;
	color: #000000;
} 
header, footer {
	background: #000000;
	width: 90%;
	max-width: 100%;
	max-height: 30%
	margin:20% auto;

}

header nav {
	background: #000000;
	overflow: hidden;
}
header nav ul {
	list-style: none;
}
header nav ul li {
	float:right;
}
	header nav ul li a {
		padding: 3% 6%;
		display: block;
		color: #fff;
		text-decoration: none;


	}
	 header nav ul li a:hover {
	 	background: #55d737;
	 }
	
.main {
  background: #000000;
  display: flex;
  padding: : 0%
  
} 


.main aside,
.main .article{
  padding: 2%;
  box-sizing:border-box;
}

.main .iz{
  width: 15%;
}
.main .de {
	width: 15%
}
.iz{
  background: black;
  color: #fff;
  order: 1;
}

.de{
  background: white;
  order: 3;
}

.article{
  order: 2;
  width: 70%;
  background: white;
  
}

article{
  background: white;
  margin: 5%;
}

footer {background: #000;
color:#fff;
clear:both
padding:10% 0%;
text-align: center;
}

.centro {
	text-align: center;
}

a.open{
	background-color: #414141;
	border-radius: 5%;
	color: #fff;
	font-size: 0.5em;
	margin: 20px;
	padding: 10px 20px;
	text-decoration: none;
	text-shadow: 2% 2% 0% #000;
	

}


section.modalDialog{
	background-color: white;
	bottom: 0;
	top:0;
	left: 0;
	right: 0;
	position: fixed;
	display: none;
	z-index: 2;
}

section.modalDialog:target{
	display: block;
}

a.close{
	background-color: #414141;
	border-radius: 5%;
	color: #fff;
	font-size: 60%;
	font-weight: bold;
	line-height: 22%;
	position: absolute;
	right: 1%;
	top:2%;
	text-align: center;
	text-decoration: none;
	width: 3%;
}

a.close{
	background-color: #000;
}

section.modal{
	background-color: #111;
	box-shadow: 0% 0% 10% #000;
	border-radius: 5%;
	color: #fff;
	margin: 5% auto;
	padding: 5%;
	position: relative;
	width: 60%;
}

.diferencia {
	color: #fff;
	font-size: 2em;
	margin-bottom: 10px;
}

.diferente{
	color: #fff;
	font-size: 1.2em;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Bienvenidos</title>
		<meta charset="UTF-8">
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-3473978549309154",
    enable_page_level_ads: true
  });
</script>

<link rel="shortcut icon" type="image/x-icon" href="imagenes/ale2.jpg">

<link rel="stylesheet" type="text/css" href="css/estilos.css" />
</head>
<body>
	<header>
    <script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "VideoObject",
  "name": "enviar mensaje masivo outlook office ",
  "description": "las personas lo reciben como que si estuviera destinado solo a ellos y no como una cadena,  cada persona verá su propia dirección de correo en el mensaje y no la del resto de contactos",
  "thumbnailUrl": [
    "https://i.ytimg.com/vi/1LhkxeHZm0A/hqdefault.jpg"
   ],
  "uploadDate": "2017-10-23T19:57:00",
  "duration": "PPT4M28S",
  "embedUrl": "https://www.youtube.com/embed/1LhkxeHZm0A",
  "interactionCount": "67"
}
</script>
  

<div class="logotipo"><img src="imagenes/ale2.jpg" width="70" alt="logotipo"> </div>
<aside class="arriba">
    <h3></h3>
    <p></p>
  </aside>

  <nav>
  <ul><li>
  <div class="contenedor">
     <a href="#" class="open">INICIO</a>
  </div>
</li>
    <li><div class="contenedor">
      <a href="#openmodal1" class="open"> ACERCA DE </a>
      <section id="openmodal1" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> acerca de</h2>
          <p class="diferente">Este sitio abarca tutoriales para dar soluciones destinadas a resolver dudas acerca de todo tipo de ideas útiles para el internauta</p>
        </section>
      </section>
    </div></li>
    <li><div class="contenedor">
      <a href="#openmodal2" class="open">POLITICA DE PRIVACIDAD</a>
      <section id="openmodal2" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> politica de privacidad</h2>
          <p class="diferente">Esta permitido compartir todo el contenido de este sitio, más no está permitido copiar cual fiel copia, para usarlo en el desarrollo de otro sitio web, todo o parte del contenido de mi sitio web. En cualquier caso que se inserte cualquier parte del contenido en otro sitio web se deberá hacer referencia de que se está compartiendo el contenido y de forma notoria que dicho contenido es de mi autoria: Susana Alexadra Loor García y de que se extrajo de: <a href="https://alexandrawp.herokuapp.com">https://alexandrawp.herokuapp.com/</a> Por lo tanto se establece que se respetará este sitio web como propiedad de la autora, y nadie se podrá adujudicar a su autoria todo del contenido de dicho sitio</p>
        </section>
      </section>
    </div></li>
    <li><div class="contenedor">
      <a href="#openmodal3" class="open"> CONTACTO</a>
      <section id="openmodal3" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> CONTACTO</h2>
          <p class="diferente">Comunicate con nosotros a este correo [email protected]</p>
        </section>
      </section>
    </div> </li>
    <li>
       <div class="contenedor">
        <a target="_blank" class="open" href="https://www.youtube.com/channel/UCsYcSASeuWbHFBZJXy6SJEA?sub_confirmation=1">YOUTUBE</a>
       </div>
 </li>
  </ul>
      </nav>
    </header>

		<section class="main"><aside class="de">
    <h3></h3>
    <p><a href="paginas principales/acceso incognito.html">acceso a incognito desde el icono principal</a></p></br>
<p><a href="paginas principales/captura de pantalla.html"> capturar pantalla sin paint</a></p></br>

<p><a href="paginas principales/clavewindows.html">conocer la clave de windows instalada en tu equipo</a></p></br>

<p><a href="paginas principales/configmicrofono.html">configurar el microfono para que se escuche bien en audio/video</a></p></br>

<p><a href="paginas principales/convertir ventana a pestaña.html">convertir ventana a pestaña y viceversa</a></p></br>

<p><a href="paginas principales/cookies chrome.html">desactivar, activar cookies en chrome</a></p></br>

<p><a href="paginas principales/cortar video.html">cortar video de youtube</a></p></br>

<p><a href="paginas principales/direccion ip.html">conocer dns, direccion ip, gategay o puerta de enlace predeterminada y mascara de subred</a></p></br>

<p><a href="paginas principales/enviar mensaje masivo.html">enviar mensaje masivo outlook office</a></p></br>

<p><a href="paginas principales/excepciones avira.html">añadir excepciones a avira</a></p></br>

<p><a href="paginas principales/google ncr.html">hacer busquedas globales y en cualquier idioma</a></p></br>

<p><a href="paginas principales/grabadora.html">localizar los archivos de la grabadora de sonido</a></p></br>

<p><a href="paginas principales/guardar sesión chrome.html">guardar sesion en chrome rapidamente</a></p></br>

<p><a href="paginas principales/k de youtube.html">averigua que significa la k en youtube</a></p></br>

<p><a href="paginas principales/ocultar video.html">ocultar informacion y partes de video</a></p></br>

<p><a href="paginas principales/rejected git push heroku master.html">solucionar el error de rejected git push heroku master</a></p></br>

<p><a href="paginas principales/traducir texto.html">traducir texto rapidamente</a></p></br>

<p><a href="paginas principales/vista windows.html">gesto del mouse pack para cambio inesperado de aplicaciones en windows</a> </p></br>
  </aside>
  <aside class="iz">
    <h3></h3>
    <p></p>
  </aside>
  <section class="article">
    <article>
      <h2>Tutoriales</h2><br>

      	<p class="centro"><a href="paginas principales/rejected git push heroku master.html"><img src="imagenes/1.jpg" width="150" alt="solucion a rejeted git push heroku master" title="solucion a rejeted git push heroku master"></a>

      	<a href="paginas principales/enviar mensaje masivo.html"><img src="imagenes/2.jpg" width="150" alt="enviar mensaje masivo outlook office" title="enviar mensaje masivo outlook office"></a>

      	<a href="paginas principales/traducir texto.html"><img src="imagenes/3.jpg" width="150" alt="traducir texto rápidamente" title="traducir texto rápidamente"></a>

      	<a href="paginas principales/google ncr.html"><img src="imagenes/4.jpg" width="150" alt="hacer busquedas globales" title="hacer busquedas globales y en cualquier idioma google ncr"></a>

      	<a href="paginas principales/k de youtube.html"><img src="imagenes/6.jpg" width="150" alt="k de youtube" title="k de youtube"></a>

      	<a href="paginas principales/grabadora.html"><img src="imagenes/7.jpg" width="150" alt="localización de archivos de la grabadora de sonido" title="localización de archivos de la grabadora de sonido"></a>

      	<a href="paginas principales/clavewindows.html"><img src="imagenes/8.jpg" width="150" alt="Conocer la contraseña instalada de tu windows" title="conocer la contraseña instalada de tu windows"></a>

      	<a href="paginas principales/excepciones avira.html"><img src="imagenes/9.jpg" width="150" alt="añadir excepciones de avira" title="añadir excepciones de avira"></a>

      	<a href="paginas principales/acceso incognito.html"><img src="imagenes/10.jpg" width="150" alt="acceso directo a incognito desde el icono" title="acceso directo a incognito desde el icono google chrome"></a>

      	<a href="paginas principales/direccion ip.html"><img src="imagenes/11.jpg" width="150" alt="direccion ip dns etcetera" title="obtener dirección ip, gateway, dns, mascara de subred"></a>

      	<a href="paginas principales/vista windows.html"><img src="imagenes/12.jpg" width="150" alt="cambio de accdidenta de aplicaciones de windows 8" title="cambio de accdidenta de aplicaciones de windows 8"></a>

      	<a href="paginas principales/captura de pantalla.html"><img src="imagenes/13.jpg" width="150" alt="atajo para capturar pantalla sin paint" title="atajo para capturar pantalla sin paint"></a>

      	<a href="paginas principales/cookies chrome.html"><img src="imagenes/14.jpg" width="150" alt="desactivar cookies en chrome" title="desactivar cookies en chrome"></a>

      	<a href="paginas principales/configmicrofono.html"><img src="imagenes/15.jpg" width="150" alt="configurar microfono" title="configurar microfono"></a>

      	<a href="paginas principales/ocultar video.html"><img src="imagenes/16.jpg" width="150" alt="ocultar información de video" title="Tapar información de video"></a>

      	<a href="paginas principales/cortar video.html"><img src="imagenes/17.jpg" width="150" alt="cortar video de youtube" title="cortar video de youtube"></a>

      	<a href="paginas principales/guardar sesión chrome.html"><img src="imagenes/18.jpg" width="150" alt="guardar sesión e chrome rápidamente" title="guarda sesión en chrome rápidamente"></a>

      	<a href="paginas principales/convertir ventana a pestaña.html"><img src="imagenes/5.jpg" width="150" alt="convertir ventana a pestaña y vicecersa" title="convertir ventana a pestaña y vicecersa"></a></p>
    </article>
  </section>
  
</section>
		
			
	<footer><p>Portoviejo-Manabí-Ecuador</p></footer>
		




</body>
</html>

Quiero que a cierta medida mis dos sidebar se coloquen debajo del articulo, https://youtu.be/HtWIrGqbEwI?t=745, me he dado el trabajo de cambiar todo lo que dice pixeles por porcentajes Juan copié y pegué lo que me indicastes, muchas gracias porque eres el único que se ha tomado el trabajo de ayudarme me ha resultado estoy muy felíz pero tengo el siguiente error que sin achicar en la página el footer me sale a los lados y no se ve como esta en la pagina web introducir la descripción de la imagen aquí

9
  • Si no tienes una plantilla o librería responsive, puedes crearla tú misma usando reglas CSS que implementen media queryes, las cuales permitirán para que el contenido de tu página se adapte según las dimensiones de la pantalla del dispositivo. Para más detalles puedes ver la pregunta CSS: ¿Qué son los media queries, para qué sirven, cómo se agrupan y cómo implementarlos.
    – A. Cedano
    Commented el 25 ene. 2018 a las 14:49
  • 2
    Una buena opcion es que implementes bootstrap a tu web, con eso ya tu pagina sera responsive si tu tener que crear las reglas , lo puedes customizar si.
    – Ivalberto
    Commented el 25 ene. 2018 a las 14:50
  • estan de varios telefonos, pero falto el samsung, osea que lo que esta en ese link que me mandas es lo que debo añadir a mi hoja css? Commented el 25 ene. 2018 a las 15:06
  • 2
    A pesar de parecer más concreta por hablar de un caso algo más particular, esta pregunta es muy amplia (se han escrito libros enteros sobre el tema) y puede tener muchas respuestas válidas (diferentes desarrolladores podrían hacerlo de diferente forma). Deberías hacer más búsqueda e investigación y reducir el ámbito de la pregunta. Lee Cómo preguntar y ¿Qué tipo de preguntas debo evitar preguntar?
    – Alvaro Montoro
    Commented el 25 ene. 2018 a las 22:22
  • 1
    @AlexandraLoor Así no es cómo funciona Stack Overflow. Completa el recorrido de bienvenida para obtener más información sobre el sitio, luego lee Cómo preguntar y edita tu pregunta con los consejos que encontrarás allí: céntrate en un problema en concreto, pon un título representativo, crea un ejemplo mínimo verificable... y si después de que alguien te ayude tienes nuevas preguntas, crea una nueva pregunta o comenta directamente en la respuesta que utilizaste.
    – Alvaro Montoro
    Commented el 26 ene. 2018 a las 18:36

3 respuestas 3

3

Tienes la opción original de css utilizando @media

Las Media queries consisten de un media type y una o mas expresiones, implicando características del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es verdadera si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas.

Ejemplo:

 <!-- CSS media query mediante linkeo -->
 <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

 <!-- CSS media query dentro de la hoja estilo -->
 <style>
      .ejemplo {
           display:block;
           }
      @media (max-width: 600px) {
      .ejemplo {
     display: none;
             }
      }
 </style>

Cuando una media query es verdadera, la hoja de estilo correspondiente o reglas de estilos son aplicadas, siguiendo las reglas normales de cascada.

Cuando not ni only son usadas dentro de una query, el tipo de medio es opcional y será interpretada como all.

Un ejemplo:

@media all and (max-width:768px) {
 /* codigo */
    }

Para saber más del tema te dejo este link acerca de las Media Queries brindado por "Mozilla Devs" y este otro link brindado por w3schools.

Otra opción super recomendada, para ganar tiempo y futuras fallas de diseño y que muchos utilizan el dia de hoy, es un framework llamado:

Bootstrap

Que brinda muchisimas formas de estilos, maquetado,etc.. y siempre responsivo.

(es decir, adaptable a cualquier dispositivo)

EDIT / Posible Solución

Encontré varias cosas a cambiar en el HTML

</br> por <br>
Etiquetas <section> sin cerrar o agregadas demás. 

Posible solución: (actualizada)

* *, *::before, *::after{ box-sizing: border-box; padding: 0; margin: 0;}
    body {
	background: #000000;
	color: #000000;
} 
header, footer {
	background: #000000;
	width: 90%;
	max-width: 100%;
	max-height: 30%
	margin:20% auto;

}

header nav {
	background: #000000;
	overflow: hidden;
}
header nav ul {
	list-style: none;
}
header nav ul li {
	float:right;
}
	header nav ul li a {
		padding: 3% 6%;
		display: block;
		color: #fff;
		text-decoration: none;


	}
	 header nav ul li a:hover {
	 	background: #55d737;
	 }
	
.main {
  background: #000000;
  display: flex;
  padding: : 0%
  
} 


.main aside,
.main .article{
  padding: 2%;
  box-sizing:border-box;
}

.main .iz{
  width: 15%;
}
.main .de {
	width: 15%
}
.iz{
  background: black;
  color: #fff;
  order: 1;
}

.de{
  background: white;
  order: 3;
}

.article{
  order: 2;
  width: 70%;
  background: white;
}

article{
  background: white;
  margin: 5% auto;
}

footer {
background: #000;
color:#fff;
clear:both
padding:10% 0%;
text-align: center;
}

.centro {
	text-align: center;
}

a.open{
	background-color: #414141;
	border-radius: 5%;
	color: #fff;
	font-size: 0.5em;
	margin: 20px;
	padding: 10px 20px;
	text-decoration: none;
	text-shadow: 2% 2% 0% #000;
}

section.modalDialog{
	background-color: white;
	bottom: 0;
	top:0;
	left: 0;
	right: 0;
	position: fixed;
	display: none;
	z-index: 2;
}

section.modalDialog:target{
	display: block;
}

a.close{
	background-color: #414141;
	border-radius: 5%;
	color: #fff;
	font-size: 60%;
	font-weight: bold;
	line-height: 22%;
	position: absolute;
	right: 1%;
	top:2%;
	text-align: center;
	text-decoration: none;
	width: 3%;
}

a.close{
	background-color: #000;
}

section.modal{
	background-color: #111;
	box-shadow: 0% 0% 10% #000;
	border-radius: 5%;
	color: #fff;
	margin: 5% auto;
	padding: 5%;
	position: relative;
	width: 60%;
}

.diferencia {
	color: #fff;
	font-size: 2em;
	margin-bottom: 10px;
}

.diferente{
	color: #fff;
	font-size: 1.2em;
}
/** Posible Solución a la pregunta **/

@media all and (max-width:800px) {
 .main{
 display:block;
 width:100%;
 }
 .main .iz {
 display:inline-block;
 width:45%;
 height:100%;
 margin:0 auto;
 }
 .main .de {
 display:inline-block;
 width:45%;
 height:100%;
 margin:0 auto;
 }
 .de p {
 width:90%;
 margin:0 auto;
 display:inline;
 }
 .iz p {
 width:90%;
 margin:0 auto;
 display:inline;
 }
 .article {
 width:100%;
 margin:0 auto;
 }
 article {
 margin:1% auto;
 }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Bienvenidos</title>
		<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="imagenes/ale2.jpg">

<link rel="stylesheet" type="text/css" href="css/estilos.css" />
</head>
<body>
	<header>
    <script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "VideoObject",
  "name": "enviar mensaje masivo outlook office ",
  "description": "las personas lo reciben como que si estuviera destinado solo a ellos y no como una cadena,  cada persona verá su propia dirección de correo en el mensaje y no la del resto de contactos",
  "thumbnailUrl": [
    "https://i.ytimg.com/vi/1LhkxeHZm0A/hqdefault.jpg"
   ],
  "uploadDate": "2017-10-23T19:57:00",
  "duration": "PPT4M28S",
  "embedUrl": "https://www.youtube.com/embed/1LhkxeHZm0A",
  "interactionCount": "67"
}
</script>
<div class="logotipo"><img src="imagenes/ale2.jpg" width="70" alt="logotipo"> </div>
<aside class="arriba">
    <h3></h3>
    <p></p>
  </aside>

  <nav>
  <ul><li>
<div class="contenedor">
     <a href="#" class="open">INICIO</a>
  </div>
</li>
    <li><div class="contenedor">
      <a href="#openmodal1" class="open"> ACERCA DE </a>
      <section id="openmodal1" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> acerca de</h2>
          <p class="diferente">Este sitio abarca tutoriales para dar soluciones destinadas a resolver dudas acerca de todo tipo de ideas útiles para el internauta</p>
        </section>
      </section>
    </div></li>
    <li><div class="contenedor">
      <a href="#openmodal2" class="open">POLITICA DE PRIVACIDAD</a>
      <section id="openmodal2" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> politica de privacidad</h2>
          <p class="diferente">Esta permitido compartir todo el contenido de este sitio, más no está permitido copiar cual fiel copia, para usarlo en el desarrollo de otro sitio web, todo o parte del contenido de mi sitio web. En cualquier caso que se inserte cualquier parte del contenido en otro sitio web se deberá hacer referencia de que se está compartiendo el contenido y de forma notoria que dicho contenido es de mi autoria: Susana Alexadra Loor García y de que se extrajo de: <a href="https://alexandrawp.herokuapp.com">https://alexandrawp.herokuapp.com/</a> Por lo tanto se establece que se respetará este sitio web como propiedad de la autora, y nadie se podrá adujudicar a su autoria todo del contenido de dicho sitio</p>
        </section>
      </section>
    </div></li>
    <li><div class="contenedor">
      <a href="#openmodal3" class="open"> CONTACTO</a>
      <section id="openmodal3" class="modalDialog">
        <section class="modal">
          <a href="#close" class="close"> X </a>
          <h2 class="diferencia"> CONTACTO</h2>
          <p class="diferente">Comunicate con nosotros a este correo [email protected]</p>
        </section>
      </section>
    </div> </li>
    <li>
       <div class="contenedor">
        <a target="_blank" class="open" href="https://www.youtube.com/channel/UCsYcSASeuWbHFBZJXy6SJEA?sub_confirmation=1">YOUTUBE</a>
       </div>
 </li>
  </ul>
      </nav>
    </header>

		<section class="main">
    <aside class="de">
    <h3></h3>
    <p><a href="paginas principales/acceso incognito.html">acceso a incognito desde el icono principal</a></p><br>
<p><a href="paginas principales/captura de pantalla.html"> capturar pantalla sin paint</a></p><br>

<p><a href="paginas principales/clavewindows.html">conocer la clave de windows instalada en tu equipo</a></p><br>

<p><a href="paginas principales/configmicrofono.html">configurar el microfono para que se escuche bien en audio/video</a></p><br>

<p><a href="paginas principales/convertir ventana a pestaña.html">convertir ventana a pestaña y viceversa</a></p><br>

<p><a href="paginas principales/cookies chrome.html">desactivar, activar cookies en chrome</a></p><br>

<p><a href="paginas principales/cortar video.html">cortar video de youtube</a></p><br>

<p><a href="paginas principales/direccion ip.html">conocer dns, direccion ip, gategay o puerta de enlace predeterminada y mascara de subred</a></p><br>

<p><a href="paginas principales/enviar mensaje masivo.html">enviar mensaje masivo outlook office</a></p><br>

<p><a href="paginas principales/excepciones avira.html">añadir excepciones a avira</a></p><br>

<p><a href="paginas principales/google ncr.html">hacer busquedas globales y en cualquier idioma</a></p><br>

<p><a href="paginas principales/grabadora.html">localizar los archivos de la grabadora de sonido</a></p><br>

<p><a href="paginas principales/guardar sesión chrome.html">guardar sesion en chrome rapidamente</a></p><br>

<p><a href="paginas principales/k de youtube.html">averigua que significa la k en youtube</a></p><br>

<p><a href="paginas principales/ocultar video.html">ocultar informacion y partes de video</a></p><br>

<p><a href="paginas principales/rejected git push heroku master.html">solucionar el error de rejected git push heroku master</a></p><br>

<p><a href="paginas principales/traducir texto.html">traducir texto rapidamente</a></p><br>

<p><a href="paginas principales/vista windows.html">gesto del mouse pack para cambio inesperado de aplicaciones en windows</a> </p><br>
  </aside>
  <aside class="iz">
    <h3></h3>
    <p></p>
  </aside>
  <section class="article">
    <article>
      <h2>Tutoriales</h2><br>

      	<p class="centro"><a href="paginas principales/rejected git push heroku master.html"><img src="imagenes/1.jpg" width="150" alt="solucion a rejeted git push heroku master" title="solucion a rejeted git push heroku master"></a>

      	<a href="paginas principales/enviar mensaje masivo.html"><img src="imagenes/2.jpg" width="150" alt="enviar mensaje masivo outlook office" title="enviar mensaje masivo outlook office"></a>

      	<a href="paginas principales/traducir texto.html"><img src="imagenes/3.jpg" width="150" alt="traducir texto rápidamente" title="traducir texto rápidamente"></a>

      	<a href="paginas principales/google ncr.html"><img src="imagenes/4.jpg" width="150" alt="hacer busquedas globales" title="hacer busquedas globales y en cualquier idioma google ncr"></a>

      	<a href="paginas principales/k de youtube.html"><img src="imagenes/6.jpg" width="150" alt="k de youtube" title="k de youtube"></a>

      	<a href="paginas principales/grabadora.html"><img src="imagenes/7.jpg" width="150" alt="localización de archivos de la grabadora de sonido" title="localización de archivos de la grabadora de sonido"></a>

      	<a href="paginas principales/clavewindows.html"><img src="imagenes/8.jpg" width="150" alt="Conocer la contraseña instalada de tu windows" title="conocer la contraseña instalada de tu windows"></a>

      	<a href="paginas principales/excepciones avira.html"><img src="imagenes/9.jpg" width="150" alt="añadir excepciones de avira" title="añadir excepciones de avira"></a>

      	<a href="paginas principales/acceso incognito.html"><img src="imagenes/10.jpg" width="150" alt="acceso directo a incognito desde el icono" title="acceso directo a incognito desde el icono google chrome"></a>

      	<a href="paginas principales/direccion ip.html"><img src="imagenes/11.jpg" width="150" alt="direccion ip dns etcetera" title="obtener dirección ip, gateway, dns, mascara de subred"></a>

      	<a href="paginas principales/vista windows.html"><img src="imagenes/12.jpg" width="150" alt="cambio de accdidenta de aplicaciones de windows 8" title="cambio de accdidenta de aplicaciones de windows 8"></a>

      	<a href="paginas principales/captura de pantalla.html"><img src="imagenes/13.jpg" width="150" alt="atajo para capturar pantalla sin paint" title="atajo para capturar pantalla sin paint"></a>

      	<a href="paginas principales/cookies chrome.html"><img src="imagenes/14.jpg" width="150" alt="desactivar cookies en chrome" title="desactivar cookies en chrome"></a>

      	<a href="paginas principales/configmicrofono.html"><img src="imagenes/15.jpg" width="150" alt="configurar microfono" title="configurar microfono"></a>

      	<a href="paginas principales/ocultar video.html"><img src="imagenes/16.jpg" width="150" alt="ocultar información de video" title="Tapar información de video"></a>

      	<a href="paginas principales/cortar video.html"><img src="imagenes/17.jpg" width="150" alt="cortar video de youtube" title="cortar video de youtube"></a>

      	<a href="paginas principales/guardar sesión chrome.html"><img src="imagenes/18.jpg" width="150" alt="guardar sesión e chrome rápidamente" title="guarda sesión en chrome rápidamente"></a>

      	<a href="paginas principales/convertir ventana a pestaña.html"><img src="imagenes/5.jpg" width="150" alt="convertir ventana a pestaña y vicecersa" title="convertir ventana a pestaña y vicecersa"></a></p>
    </article>
  </section>
  
  </section>
	<footer><p>Portoviejo-Manabí-Ecuador</p></footer>
		
</body>
</html>

12
  • tengo que cambiar todos los pixeles que tengo en mi codigo css a porcentajes? Commented el 25 ene. 2018 a las 16:23
  • Se recomienda siempre utilizar medidas para el responsive conviene %, em, rem.
    – Juan
    Commented el 25 ene. 2018 a las 16:25
  • te escribo mi codigo en una respuesta? Commented el 25 ene. 2018 a las 16:30
  • estoy esperando tu ayuda amigo Commented el 25 ene. 2018 a las 19:30
  • @AlexandraLoor Hola perdón por la demora, como te comente anteriormente, en la hoja de estilo que hallas creado "estlio.css" tienes que agregar al final de todo @media all o @media screen. edito mi respuesta para que lo verifiques.
    – Juan
    Commented el 25 ene. 2018 a las 21:54
3

Hay algo que se llama responsive design, el cual hay varias formas de manejar lo, lo puedes manejar manualmente desde CSS con los @media screen aqui te dejo donde lo puedes leer link, tambien lo puedes manejar por medio de frameworks, como Materialize, Bootstrap, y otros que manejan un sistema GRID que se basa en rejillas que dividen la pantalla en 12 columnas y por medio de clases manejas la cantidad de columnas que manejara el elemento en los diferentes tamaños de pantalla.

3
  • ¿osea que independientemente de cual sea mi codigo en css yo puedo añadir esos codigos? ¿Me puedes dar codigo para teléfonos samsung? Commented el 25 ene. 2018 a las 15:25
  • @media screen es un decorador que se aplica para los diferentes tamaños de pantalla en pixels (puedes revisar cual es la resolución para el celular que quieres usar pero no todos tienen la misma resolución por eso mejor usar frameworks como Boostrap), deberías primero diseñar la pagina para mobiles y luego que se adapte a resolución de un monitor de PC o tablet, siguiendo un orden incremental de acuerdo a tamaño pantallas. Commented el 25 ene. 2018 a las 15:45
  • yo solo quiero que a 800 pixeles los dos sidebar laterales se pongan abajo del contenido Commented el 25 ene. 2018 a las 19:30
0

En resumen te diría que adaptarla a móviles es tan sencillo como usar porcentajes en vez de unidades fijas como px. Y usar los media queries para aplicar estilos dependiendo de las resoluciones.

Otra forma muy fácil de hacer tu sitio responsive es usar frameworks de estilos como Bootstrap, te facilita mucho la vida

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.