2
希望这个问题不会因为我已经完成各自的研究而被低估。Android上的网页布局
我试图开发一个响应式网络实践，它在PC上工作，每当我改变它的大小比例调整大小，但当我试图进入我的手机（三星Galaxy S3）它没有改变。
使用的技术是设置根字体大小并使代码的字体大小依赖于它。为整个博客设置一个容器（设置为height: 100%），并为孩子的身高和宽度使用百分比（％），并使用手机屏幕尺寸的媒体查询。
我得到这样的输出：image
可能是什么问题呢？我对批评者开放，并提供编码技巧。
* {
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>
\t <title>MyWeb</title>
\t <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
\t <link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" 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="https://static.tumblr.com/737181aea20b4523b6fce168a29fe06b/nwsqmvx/cIhmrn4un/tumblr_static_bigstock_silhouettes_of_concert_crowd_i_1565261621.jpg"/>
<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>