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>