ajustar tamaño de pagina al achicar la ventana

publicado por: Anonymous

He visto en muchas paginas que al achicar la ventana aunque sea hasta 1024px de ancho el contenido de la pagina se achica acorde al tamaño de la ventana intente con media queries pero no entendi muy bien como usarlo soy nuevo en esto de css les dejo el código

gral.css

_x000D_

_x000D_

*{_x000D_
	margin:0px;_x000D_
	padding:0px;_x000D_
}_x000D_
_x000D_
body {_x000D_
	/*	background-image: url("../rock.jpg");*/_x000D_
	margin: auto;_x000D_
	width: 100%;_x000D_
}_x000D_
_x000D_
main {_x000D_
	width:70%;_x000D_
	float:left;_x000D_
	background-color: #fff;_x000D_
	height: auto;_x000D_
_x000D_
}_x000D_
_x000D_
aside{_x000D_
	width: 30%;_x000D_
	float:right;_x000D_
	background-color: #fff;_x000D_
	height: auto;_x000D_
}_x000D_
_x000D_
.glyphicon {_x000D_
    font-size: 25px;_x000D_
}_x000D_
_x000D_
.icon-size_x000D_
{_x000D_
    font-size: 87px;_x000D_
}_x000D_
_x000D_
.container{_x000D_
	float:left;_x000D_
    padding-right: 0px;_x000D_
    padding-left: 0px;_x000D_
}_x000D_
_x000D_
/* NavBar gral*/_x000D_
.navbar {_x000D_
	border-bottom:2px solid #F49D51;_x000D_
	margin-bottom: 0px;_x000D_
}_x000D_
_x000D_
/* NavBar login de usuario*/_x000D_
.navbar-login_x000D_
{_x000D_
    width: 20%;_x000D_
    padding: 10px;_x000D_
    padding-bottom: 0px;_x000D_
}_x000D_
_x000D_
.navbar-login-session_x000D_
{_x000D_
    padding: 10px;_x000D_
    padding-bottom: 0px;_x000D_
    padding-top: 0px;_x000D_
}_x000D_
_x000D_
/* Manejo de Tabs Gral*/_x000D_
.tabss{_x000D_
	background-color: #444444;_x000D_
	margin: 0px;_x000D_
	padding-top: 5px;_x000D_
	border-bottom-color: #666666;_x000D_
}_x000D_
_x000D_
.nav-tabs {_x000D_
	margin-left: 5px;_x000D_
	border: 0px solid transparent;_x000D_
	_x000D_
}_x000D_
_x000D_
.nav-tabs > li > a,_x000D_
.nav-tabs > li > a:hover,_x000D_
.nav-tabs > li > a:focus {_x000D_
    color: #FFF;_x000D_
_x000D_
}_x000D_
.nav-tabs > .open > a,_x000D_
.nav-tabs > .open > a:hover,_x000D_
.nav-tabs > .open > a:focus,_x000D_
.nav-tabs > li > a:hover,_x000D_
.nav-tabs > li > a:focus {_x000D_
	color: #fff;_x000D_
	background-color: #666666;_x000D_
	border-color: transparent;_x000D_
	_x000D_
}_x000D_
.nav-tabs > li.active > a,_x000D_
.nav-tabs > li.active > a:hover,_x000D_
.nav-tabs > li.active > a:focus {_x000D_
	color: #fff;_x000D_
	font-weight: bold;_x000D_
	background-color: #666666;_x000D_
	border-color: #444444;_x000D_
	border-bottom-color: transparent;_x000D_
}_x000D_
_x000D_
.panel-primary {_x000D_
  border-bottom-color: #fff;_x000D_
  border-left-color: #fff;_x000D_
  border-right-color: #fff;_x000D_
  border-top-color: #666666;_x000D_
  float:left;_x000D_
  width:95.8%;_x000D_
}_x000D_
_x000D_
.panel-primary > .panel-heading {_x000D_
  color: #fff;_x000D_
  background-color: #666666;_x000D_
  border-color: #666666;_x000D_
}_x000D_
_x000D_
_x000D_
.panel {_x000D_
  	border: 0px solid transparent;_x000D_
}_x000D_
_x000D_
.panel-heading {_x000D_
  	border-top-left-radius: 0px;_x000D_
  	border-top-right-radius: 0px;_x000D_
  	width: 100%_x000D_
}_x000D_
_x000D_
.panel-body {_x000D_
  padding: 15px; _x000D_
  float:left;_x000D_
}_x000D_
/* Fin Panel Tabs Gral*/_x000D_
_x000D_
.top-aside{_x000D_
	float:right;_x000D_
	background-color: #444444;_x000D_
	margin: 0px;_x000D_
	padding-top: 5px;_x000D_
	border-bottom-color: #666666;_x000D_
	border-left-color: black;_x000D_
	box-shadow: 1px 0 0 #3a3a3a inset;_x000D_
	height: 46px;_x000D_
	width:100%;_x000D_
}_x000D_
/* Mesas Restaurant */_x000D_
.table-mesas {_x000D_
	float:left;_x000D_
	width: 95.8%;_x000D_
}_x000D_
.table-mesas tr td{_x000D_
	padding:15px;_x000D_
} _x000D_
.butt-mesas {_x000D_
	-webkit-border-radius: 4;_x000D_
	-moz-border-radius: 4;_x000D_
	border-radius: 4px;_x000D_
	text-shadow: 1px 1px 15px #666666;_x000D_
	font-family: Arial;_x000D_
	color: #ffffff;_x000D_
	font-size: 30px;_x000D_
	padding: 30px 40px;_x000D_
	background: 	#88dd77;_x000D_
	border: solid #000000 1px;_x000D_
	text-decoration: none;_x000D_
	width: 100%;_x000D_
}_x000D_
_x000D_
.butt-mesas:hover {_x000D_
	background: #9ae288;_x000D_
	text-shadow: 1px 1px 15px #666666;_x000D_
	text-decoration: none;_x000D_
}_x000D_
/* Fin Mesas Restaurant */

_x000D_

<html lang="es">_x000D_
  <head>_x000D_
<title>Trabajo Cuatrimestral OO2</title>_x000D_
<meta charset="UTF-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link href="../css/bootstrap.css" rel="stylesheet">_x000D_
<link href="../css/gral.css" rel="stylesheet">_x000D_
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>_x000D_
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>_x000D_
</script>_x000D_
  </head>_x000D_
_x000D_
<body>_x000D_
  <nav class="navbar navbar-default">_x000D_
    <div class="navbar-header">_x000D_
      <a class="navbar-brand" href="#"><img src="../logo.jpg" width="150" height="35"></a>_x000D_
    </div>_x000D_
    <ul class="nav navbar-nav">_x000D_
      <li class="active" id="restaurant"><a href="../restaurant/salon.html" title="Restaurant"><span class="glyphicon glyphicon-cutlery"></span></a></li>_x000D_
      <li id="ventas"><a href="#productos/" title="Ventas"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>_x000D_
      <li id="productos"><a href="../productos/productos.html" title="Productos"><span class="glyphicon glyphicon-apple"></span></a></li>_x000D_
      <li id="client"><a href="#productos/" title="Clientes"><span class="glyphicon glyphicon-user"></span></a></li>_x000D_
      <li id="report"><a href="#productos/" title="Reportes"><span class="glyphicon glyphicon-stats"></span></a></li>_x000D_
      <li id="config"><a href="#productos/" title="Configuración"><span class="glyphicon glyphicon-cog"></span></a></li>_x000D_
    </ul>_x000D_
    <ul class="nav navbar-nav navbar-right">_x000D_
      <li class="dropdown">_x000D_
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">_x000D_
          <span class="glyphicon glyphicon-user"></span>_x000D_
          <strong>Nombre</strong>_x000D_
          <span class="glyphicon glyphicon-chevron-down"></span>_x000D_
        </a>_x000D_
        <ul class="dropdown-menu">_x000D_
          <li>_x000D_
            <div class="navbar-login">_x000D_
              <div class="row">_x000D_
                <div class="col-lg-4">_x000D_
                  <p class="text-center">_x000D_
                    <img src="../foto-carnet.jpg" width="100" height="100">_x000D_
                  </p>_x000D_
                </div>_x000D_
                <div class="col-lg-8">_x000D_
                  <p class="text-left"><strong>Nombre Apellido</strong></p>_x000D_
                  <p class="text-left small">[email protected]</p>_x000D_
                  <p class="text-left">_x000D_
                    <a href="#" class="btn btn-primary btn-block btn-sm">Actualizar Datos</a>_x000D_
                  </p>_x000D_
                </div>_x000D_
              </div>_x000D_
            </div>_x000D_
          </li>_x000D_
          <li class="divider"></li>_x000D_
          <li>_x000D_
            <div class="navbar-login navbar-login-session">_x000D_
              <div class="row">_x000D_
                <div class="col-lg-12">_x000D_
                  <p>_x000D_
                    <a href="#" class="btn btn-danger btn-block">Cerrar Sesion</a>_x000D_
                  </p>_x000D_
                </div>_x000D_
              </div>_x000D_
            </div>_x000D_
          </li>_x000D_
        </ul>_x000D_
      </li>_x000D_
    </ul>_x000D_
_x000D_
  </nav>_x000D_
  <main>_x000D_
    <div class="container">_x000D_
      <div class="tabss">_x000D_
        <ul class="nav nav-tabs">_x000D_
          <li class="active"><a href="../restaurant/salon.html">Salon</a></li>_x000D_
          <li><a href="#">Salon 1</a></li>_x000D_
        </ul>_x000D_
      </div>_x000D_
      <div class="panel panel-primary">_x000D_
        <div class="panel-heading">_x000D_
          <span class="panel-title">MESAS</span>_x000D_
        </div>_x000D_
        <div class="panel-body">_x000D_
          <table class="table-mesas">_x000D_
            <tr>_x000D_
              <td><button class="butt-mesas">1</button></td>_x000D_
              <td><button class="butt-mesas">2</button></td>_x000D_
              <td><button class="butt-mesas">3</button></td>_x000D_
              <td><button class="butt-mesas">4</button></td>_x000D_
              <td><button class="butt-mesas">5</button></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
              <td><button class="butt-mesas">1</button></td>_x000D_
              <td><button class="butt-mesas">2</button></td>_x000D_
              <td><button class="butt-mesas">3</button></td>_x000D_
              <td><button class="butt-mesas">4</button></td>_x000D_
              <td><button class="butt-mesas">5</button></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
              <td><button class="butt-mesas">1</button></td>_x000D_
              <td><button class="butt-mesas">2</button></td>_x000D_
              <td><button class="butt-mesas">3</button></td>_x000D_
              <td><button class="butt-mesas">4</button></td>_x000D_
              <td><button class="butt-mesas">5</button></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
              <td><button class="butt-mesas">1</button></td>_x000D_
              <td><button class="butt-mesas">2</button></td>_x000D_
              <td><button class="butt-mesas">3</button></td>_x000D_
              <td><button class="butt-mesas">4</button></td>_x000D_
              <td><button class="butt-mesas">5</button></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
              <td><button class="butt-mesas">1</button></td>_x000D_
              <td><button class="butt-mesas">2</button></td>_x000D_
              <td><button class="butt-mesas">3</button></td>_x000D_
              <td><button class="butt-mesas">4</button></td>_x000D_
              <td><button class="butt-mesas">5</button></td>_x000D_
            </tr>_x000D_
          </table>_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </main>_x000D_
  <aside>_x000D_
    <section class="top-aside">_x000D_
    </section>_x000D_
  </aside>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

si quieren ver bien el diseño les dejo mi bootstrap.css porque cambie partes del mismo sin saber y sino no se aprecia el diseño

bootstrap.css
https://mega.nz/#!Fj5GWLBL!4wNXxG65pFD9IOr9rum6UTUCKWrv9eN-TpXt8QDVHSw

bootstrap.css.map
https://mega.nz/#!1vZQWCxY!AArlqs4Eyngz0HrXi2AC0gSWphzcPhwIe18E7Hm2ilQ

solución

Te dejo un ejemplo tal vez sea lo que quieras

_x000D_

_x000D_

.maxWidth {_x000D_
  width: 100%;_x000D_
  max-width: 1000px;_x000D_
  margin: 0 auto;_x000D_
}_x000D_
_x000D_
.header {_x000D_
  display: flex;_x000D_
  align-items: center;_x000D_
  justify-content: space-between;_x000D_
  background-color: #f9f9f9;_x000D_
}_x000D_
.header__logo {_x000D_
  background-color: red;_x000D_
  padding: 40px;_x000D_
}_x000D_
.header__menu ul {_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
  list-style: none;_x000D_
}_x000D_
.header__menu ul li {_x000D_
  display: inline-block;_x000D_
}_x000D_
_x000D_
.main {_x000D_
  display: flex;_x000D_
  flex-wrap: wrap;_x000D_
}_x000D_
.main__content {_x000D_
  width: 100%;_x000D_
  background-color: #ddd;_x000D_
  height: 500px;_x000D_
}_x000D_
_x000D_
@media screen and (min-width: 800px) {_x000D_
  .main__content {_x000D_
    width: 70%;_x000D_
  }_x000D_
  .main__aside {_x000D_
    width: 30%;_x000D_
    background-color: #ccc;_x000D_
    height: 500px;_x000D_
  }_x000D_
}

_x000D_

<body>_x000D_
  <div class="header maxWidth">_x000D_
  <div class="header__logo">Logo</div>_x000D_
  <nav class="header__menu">_x000D_
    <ul>_x000D_
      <li>item</li>_x000D_
      <li>item</li>_x000D_
      <li>item</li>_x000D_
      <li>item</li>_x000D_
      <li>item</li>_x000D_
    </ul>_x000D_
  </nav>_x000D_
</div>_x000D_
<section class="main maxWidth">_x000D_
  <div class="main__content"></div>_x000D_
  <aside class="main__aside">_x000D_
  </aside>_x000D_
</section>  _x000D_
</body>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *