Así que he mirado en el código de mi web que los cambios en el css e incluso el código html de ciertas secciones de mi código, cuando los cambios de tamaño de pantalla. Lo que estoy buscando en un inicio es que cuando pongo mi sitio web en la división de la pantalla en Windows 10, o en un Mac, quiero que el encabezado de «Algún Título» para mover a la izquierda de la sección de encabezado. Espero que esto me va a ayudar con el cambio de algunos aspectos de mi sitio web cuando los cambios de tamaño de pantalla. Mi código es el siguiente.

HTML:

 <!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>Some Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <link rel = "stylesheet" href="stylesheet.css">
    </head>
    <body>
    
    <div class="Header" id="myHeader">
        <a class = "headerLogo">
            <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
            text-align: center; padding-top: 20px">Some Title</h1></a>
            <style>
                a{text-decoration: none;}
                a:hover{
                    text-decoration:none;
                }
            </style>
    
        </a>
        <div class="socialmedia">
            <a class = "Facebook">
                <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
            </a>
            <a class = "Instagram">
                <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
            </a>
            <a class = "Youtube">
                <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
            </a>
            <a class = preorder>
                <button style = "background-color: white;">Pre-Order</button>
    
            </a>
        </div>
    </div>

My CSS

body {
    margin: 0;

}

.Header {
    position: fixed;
    z-index:1;
    width: 100%;
    height: 70px;
    background-color: black;
    text-align: right;
}
.headerLogo {

}

.socialmedia {
    position: fixed;
    right: 100px;
    top: 35px;
    transform: translate(0, -50%);
    display: flex;
    /* add this */
    align-items: center;
    /* add this */
}

.preorder button {
    background-color: white;
    border: 0;
    height: 35px;
    width: 110px;
    margin-left: 35px;
}

.footer {
    display: flex;
    align-items: center;
    width: 100%;
    height: 90px;
    background-color: black;
}

.img-fluid{
    width: inherit;
    height: 782px;
}

.mySlides~.mySlides {
    position: absolute;
    top: 0;
    left: 100%;
    transition: 0.7s;
}

  • Aprender acerca de las consultas de medios: w3schools.com/css/css_rwd_mediaqueries.asp
  • Sé que he leído acerca de ellos simplemente no entendí lo que max-width: para el uso para el teléfono móvil y para dividir la pantalla en un equipo
  • Para el teléfono móvil algo como 480px es genérico (que es lo Bootstrap utiliza para móvil de punto de interrupción), pero yo no sé acerca de pantallas divididas.
  • Ya estás incluyendo Bootstrap 4. Han hecho todo el trabajo duro por usted. Sólo tiene que utilizar su sistema de la red. v4-alpha.getbootstrap.com/layout/grid
  • Estoy un poco confundido acerca de cómo implementar el código de inicio en mi sitio web, yo sé que necesito usar el <link rel> etiqueta. Tuve un poco de ayuda con la última vez, porque yo no sabía dónde encontrar las hojas de estilo css.
  • leer la «introducción» de v4-alpha.getbootstrap.com/getting-started/introduction
  • Sí, los medios de comunicación, las consultas o más simple, el uso de un framework como Bootstrap o Foundation.

4 Comentarios

  1. 6

    Consultas de medios de comunicación puede ayudar a definir diferentes estilos para diferentes tamaños de pantalla. También, me gustaría recomendar una diferente alojamiento de los elementos HTML, por ejemplo:

    <!DOCTYPE html>
    <head>
      <meta charset="UTF-8">
      <title>Some Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
      <style>
        body {
            margin: 0;
    
        }
    
        .Header {
            background-color: black;
            text-align: right;
        }
    
        .socialmedia {
            transform: translate(0, -50%);
            align-items: center;
        }
    
        .socialmedia a{
          display:inline;
        }
    
        h1 {
          color:white; 
          font-family: Verdana; 
          font-style: italic; 
          font-size: x-large;
          text-align: center; padding-top: 20px;
        }
    
        @media (max-width:700px){
            .headerLogo h1 {
                text-align:left;
            }
    
        }
        @media (min-width:1000px){
          .socialmedia {
            margin-right:100px;
          }
        }
        .preorder button {
            background-color: white;
            border: 0;
            height: 35px;
            width: 110px;
            margin-left: 35px;
        }
    
        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;
        }
    
        .img-fluid{
            width: inherit;
            height: 782px;
        }
    
        .mySlides~.mySlides {
            position: absolute;
            top: 0;
            left: 100%;
            transition: 0.7s;
        }
        a{text-decoration: none;}
        a:hover{
            text-decoration:none;
        }
      </style>
    </head>
    <body>    
    <div class="Header" id="myHeader">
      <a class="headerLogo" href="file:///C:/Noah's%20stuff/Home.html" ><h1>Some Title</h1></a>
      <div class="socialmedia">
          <a class="Facebook" href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
          <a class="Instagram" href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
          <a class="Youtube" href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
          <button style = "background-color: white;">Pre-Order</button>
      </div>
    </div>
    </body>
    </html>

    Cuando el tamaño de la pantalla < 700px, a continuación, el texto se alinea a la izquierda, y cuando el tamaño de la pantalla es >= 1000, a continuación, medios de comunicación social cuadro agregar un margen a la derecha.

  2. 4

    Ejemplo

      @media screen and (max-width: 600px){
        ul.topnav li.right,
        ul.topnav li {float: none;}
        .seged{position: relative;}
        #lab{border-right: 0px;}
    }
  3. 1

    Bueno, podemos hacerlo de dos maneras:-

    1) el Uso de media queries. por favor, consulte aquí

    2) también Se puede utilizar un simple JavaScript. Ver Más Abajo:-

    JS:

    $(window).on('resize', function() {
        if($(window).width() > 600) {
            $('#body').addClass('limit1200');
            $('#body').removeClass('limit400');
        }
        else {
            $('#body').addClass('limit400');
            $('#body').removeClass('limit1200');
        }
    })

    CSS:

    .limit400 h1 { font-size:12px; }
    .limit1200 h1 { font-size:50px; }

    HTML:

    <div id="body" class="limit400">
        <h1>Hello :Professor</h1>
        <span>[ change the screen width to understant the effect ]</span>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    También he creado una demo en codepen. Ver Este

    Gracias por dar conmigo.

  4. -1

    Como se ha mencionado en los comentarios, desea consultas de medios de comunicación:

    CSS:

    @media (max-width: 800px) {
          h1 {
            text-align: left !important;
          }
        }

    HTML:

    <!DOCTYPE html>
        <head>
            <meta charset="UTF-8">
            <title>Some Title</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
            <link rel = "stylesheet" href="stylesheet.css">
        </head>
        <body>
        
        <div class="Header" id="myHeader">
            <a class = "headerLogo">
                <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:blue; font-family: Verdana; font-style: italic; font-size: x-large;
                text-align: center; padding-top: 20px">Some Title</h1></a>
                <style>
                    a{text-decoration: none;}
                    a:hover{
                        text-decoration:none;
                    }
                </style>
        
            </a>
            <div class="socialmedia">
                <a class = "Facebook">
                    <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
                </a>
                <a class = "Instagram">
                    <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
                </a>
                <a class = "Youtube">
                    <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
                </a>
                <a class = preorder>
                    <button style = "background-color: white;">Pre-Order</button>
        
                </a>
            </div>
        </div>
    
    My CSS
    
    body {
        margin: 0;
    
    }
    
    .Header {
        position: fixed;
        z-index:1;
        width: 100%;
        height: 70px;
        background-color: black;
        text-align: right;
    }
    .headerLogo {
    
    }
    
    .socialmedia {
        position: fixed;
        right: 100px;
        top: 35px;
        transform: translate(0, -50%);
        display: flex;
        /* add this */
        align-items: center;
        /* add this */
    }
    
    .preorder button {
        background-color: white;
        border: 0;
        height: 35px;
        width: 110px;
        margin-left: 35px;
    }
    
    .footer {
        display: flex;
        align-items: center;
        width: 100%;
        height: 90px;
        background-color: black;
    }
    
    .img-fluid{
        width: inherit;
        height: 782px;
    }
    
    .mySlides~.mySlides {
        position: absolute;
        top: 0;
        left: 100%;
        transition: 0.7s;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here