Como fazer com que meu site seja amigável para dispositivos móveis?

i7strelok · 31/03/2017

Hola,

este es mi primer tema en este foro.
Hice un sistema básico, pero resulta que no se adapta a los móviles, por lo que tengo 2 opciones.

1- Hacer resposive la web.
2- Hacer aplicaciones

La opción 2 también requiere que se tengan en cuenta los diferentes móviles, pero ninguna es viable para mi porque soy pésimo con el diseno.
Me podrían dar una mano? al menos con la barra de navegación.

mrtorpedin · 31/03/2017

Hola Puedes pasar la web o el codigo con el que tienes problemas?

i7strelok · 31/03/2017

Inserir CODE, HTML ou PHP:

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="style.css"/>
</head>
	    <header>
                <img src="img/logo.png" id="img_logo" alt="Empresa" />                
                <!-- NAV-->
                <nav class="nav_panel">
                    <ul>
                        <li><a href="item1.php" class="btn_menu">Item 1</a></li>
                        <li><a href="javascript:void(0)" class="btn_menu">Item 2</a>
                        <ul>
                            <li><a href="subitem21.php" class="btn_menu">SubItem 2.1</a></li>
                            <li><a href="subitem22.php" class="btn_menu">SubItem 2.2</a></li>
                        </ul>
                        </li>
                        <li><a href="javascript:void(0)" class="btn_menu">Item 3</a>
                        <ul>
                            <li><a href="subitem31.php" class="btn_menu">SubItem 3.1</a></li>
                            <li><a href="subitem32.php" class="btn_menu">SubItem 3.2</a></li>
                        </ul>
                        </li>
                        <li><a href="javascript:void(0)" class="btn_menu">Item 4</a>
                        <ul>
                            <li><a href="subitem41.php" class="btn_menu">SubItem 4.1</a></li>
                            <li><a href="subitem42.php" class="btn_menu">SubItem 4.1</a></li>
                        </ul>
                        </li>
                        <li><a href="javascript:void(0)" class="btn_menu">Mi cuenta</a>
                        <ul>
                            <li><a href="edit-profile.php" class="btn_menu">Modificar mis datos</a></li>
                            <li><a href="logout.php" class="btn_menu">Cerrar sesion</a></li>
                        </ul>
                        </li>

                    </ul>
                </nav>
            </header>

Inserir CODE, HTML ou PHP:

{
    margin: 0;
    padding: 0;
}

header
{
    background: #007;
}

ul
{
    padding: 0;
    display: inline;
    list-style: none;
    text-align: right;
}

li
{
    display: inline;
}

header > img, header > nav 
{
    display: inline-block; 
    vertical-align: top;
}

#img_logo
{
    display: inline;
    position: relative;
    width: 200px;
    padding: 10px;
}


.nav_panel
{
    display: inline;
    position: relative;
    float: right;
    font-size: 0.9em;
    margin: 10px 20px 0 0;
    padding: 10px 0;
    height: 40px;
    z-index: 100;
}

.nav_panel a   
{
    color: #fff;
    text-decoration: none;
}

.nav_panel li
{
    list-style: none;
    position: relative;
}


.btn_menu, .btn_submenu
{
    display: inline-block;
    width: 80px;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    color: #FFF;
}

.btn_menu:hover, .btn_submenu:hover
{
    background: #ff0;
    color: #007;
}
/*
.btn_menu:active, .btn_submenu:active
{
    background: linear-gradient(#527b07, #679b08);
}
*/
.nav_panel li li a
{
    width: 150px;
    display: inline-block;
}
.nav_panel li li li a
{
    width: 150px;
    display: inline-block;
}

.btn_corto
{
    width: 80px;
}

.nav_panel li ul
{
    width: 190px;
    margin: auto;
    float: right;
    text-align: center;
    display: none;
    background: #fff;
    border: 1px #ff0 solid;
    position: absolute;
    left: -70px;
}

.nav_panel li ul a
{
    color: #007;
}

.btn_largo
{
    width: auto;
}

nav li:hover ul
{
    display: block;
}

.marco
{
    background: #007;
    color: #fff;
    padding: 20px 25px;
    margin: 30px;
    width: 500px;
    text-align: left;
}

h2
{
    text-align: center;
}

.select
{
    padding: 5px 10px;
    margin: 5px;
    color: #007;
    border: 1px #007 solid;
    width: 150px;
    border-radius: 3px;
}

jearj · 05/04/2017

Prueba de esta forma:

HTML:

#img_logo
{
    display: inline;
    position: relative;
    height:40px;
    padding-left: 10px;
}

.nav_panel
{
    display: inline;
    position: relative;
    float: right;
    font-size: 0.9em;
    height: 40px;
    z-index: 100;
    padding-right: 10px;
}

.btn_menu, .btn_submenu
{
    display: inline-block;
    width: 80px;
    text-align: center;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    color: #FFF;
}

Como fazer com que meu site seja amigável para dispositivos móveis?

i7strelok

mrtorpedin

i7strelok

jearj

Tópicos similares