hope this question won't get downvoted given that I've done the respective research.
I'm trying to develop a responsive web for practice and it worked on pc, every time I changed the size it'd resize proportionally but when I tried to enter on my phone (Samsung Galaxy S3) it did not change.
The technique used was to set a root font-size and make the code's font-sizes dependent of it. Setting a container for the whole blog (setting height: 100%) and use percentages (%) for the child's heights and widths, and using a media query for the phone's screen dimension.
I get this output: image
What could be the problem? I'm open for critics, and tips for coding.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
font-size: 16px;
height: 100%;
}
.blog {
height: 100%;
}
.caja-banner {
background: rgb(48, 49, 51);
width: 100%;
top: 0;
position: fixed;
word-spacing: 1rem;
z-index: 999;
padding-left: 1.25rem;
}
.caja-banner il {
font-size: 1rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
color: white;
font-weight: 100;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
display: inline-block;
}
#inicio.contenedor-imagen{
display: block;
margin-top: 1.25rem;
width: 100%;
min-height: 12.5rem;
height: 43.75rem;
text-align: center;
overflow: hidden;
position: relative;
}
#inicio.contenedor-imagen img{
background-size: cover;
height: auto;
display: block;
}
#inicio.contenedor-imagen > h1 {
font-size: 4.5rem;
font-family: 'Covered By Your Grace', cursive;
position: absolute;
top: 50%; transform: translateY(-50%);
width: 100%;
color: white;
}
#inicio.contenedor-boton {
width: 10%;
height: 2.5rem;
top: 90%;
left: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);
border-radius: 0.3125rem;
background-color: rgba(48, 49, 51, 0.7);
display: block;
text-align: center;
}
#inicio.contenedor-boton > span {
font-family: 'Oswald', sans-serif;
color: white;
text-transform: uppercase;
font-size: 1.25rem;
line-height: 2.5rem;
}
.blog p {
font-size: 1rem;
font-family: 'Oswald', sans-serif;
color: black;
width: 85%;
margin: 1rem 0.5rem;
}
@media only screen and (max-width: 480px) {
html, body {
font-size: 12px;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>MyWeb</title>
<link href="http://ift.tt/1KuCvFo" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="http://ift.tt/1w22pMy" rel="stylesheet">
<link href="http://ift.tt/2r0svSM" rel="stylesheet">
</head>
<body>
<div class="blog">
<!-- --> <div class="caja-banner">
<ul>
<il>Home</il>
<il>Support</il>
<il>About</il>
<il>Programs</il>
</ul>
</div>
<div class="contenedor-imagen" id="inicio">
<h1>Enjoy This Magical Experience</h1>
<img src="http://ift.tt/2r0TTyK"/>
<div class='contenedor-boton' id="inicio"><span>join</span></div>
</div>
<p> Lorem ipsum dolor sit amet, illud maluisset mnesarchum ei pri, mei ex reque primis. Vis tibique detracto ut. Congue inimicus ius ea. Ad pro novum nusquam, ea quando accusam laboramus mea, sit dolores delectus te. Nec cu nisl minim nostrum.
Ad ius wisi evertitur, in labore ponderum vim. Cu purto commodo imperdiet est, ea mazim alienum elaboraret ius. Id tritani delenit persequeris sea. Virtute labores minimum quo at, nisl illum phaedrum ad usu, eam docendi euripidis ea. Duo ad nihil placerat.
Sed ad laudem sadipscing philosophia, aliquip tritani eos te. Vim tollit verterem explicari no, est cu eirmod nusquam evertitur. Pro eirmod eripuit nusquam ei. Nemore offendit scribentur usu ei, te oratio nonumy quo. Eu per aliquip civibus. Sed saepe lobortis platonem eu, eu est magna populo eirmod, inimicus postulant ne his.
</p>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire