【发布时间】：2017-10-28 14:35:30
【问题描述】：
鉴于我已经完成了相应的研究，希望这个问题不会被否决。
我正在尝试开发一个用于练习的响应式网络，它可以在 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>
<title>MyWeb</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<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>【问题讨论】：
标签： android html css web responsive