android 上的网页布局
Web page layout on android
鉴于我已经完成了相应的研究，希望这个问题不会被否决。
我正在尝试开发一个用于练习的响应式网络并且它在 PC 上运行，每次我更改大小它都会按比例调整大小但是当我尝试进入我的phone（Samsung Galaxy S3 ) 它没有改变。
使用的技术是设置根字体大小并使代码的字体大小依赖于它。为整个博客设置一个容器（设置 height: 100%）并使用百分比 (%) 作为子项的高度和宽度，并为 phone 的屏幕尺寸使用媒体查询。
我得到这个输出：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>
是的，就像第一个答案所说的那样，我需要 <meta name="viewport" content="width=device-width, initial-scale=1"> head 标签以使网站响应移动访问，还想更新代码，添加一些内容，例如横幅内的链接和第一张图片的按钮。
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
font-size: 16px;
height: 100%;
}
.blog {
height: 100%;
}
.banner {
background: rgb(48, 49, 51);
width: 100%;
top: 0;
position: fixed;
z-index: 999;
}
.banner a:link, a:visited {
color: white;
font-size: 1.25rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-weight: 100;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
padding-left: .85rem;
padding-right: .85rem;
}
.banner a:hover, a:active {
background-color: rgb(221, 228, 230);
color: rgb(48, 49, 51);
}
#inicio.contenedor-imagen{
display: block;
margin-top: 1.25rem;
width: 100%;
min-height: 12.5rem;
height: 40rem;
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;
}
.boton-inicio {
top: 90%;
left: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);
background-color: rgba(48, 49, 51, 0.7);
text-align: center;
}
.boton-inicio a:link, a:visited {
font-family: 'Oswald', sans-serif;
color: white;
text-transform: uppercase;
display: inline-block;
font-size: 1.25rem;
padding: 0.625rem 1rem;
text-decoration: none;
}
.boton-inicio a:hover, a:active {
background-color: rgb(221, 228, 230);
color: rgb(48, 49, 51);
}
.blog p {
font-size: 1rem;
font-family: Verdana,sans-serif;
color: black;
width: 85%;
margin-top: 2rem;
margin-bottom: 1rem;
padding-left: 1rem;
}
@media only screen and (max-width: 480px) {
html, body {
font-size: 16px;
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">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- This is the banner-->
<div class="banner">
<a href="default.asp" target="_blank">home</a>
<a href="default.asp" target="_blank">about</a>
<a href="default.asp" target="_blank">clients</a>
<a href="default.asp" target="_blank">contact</a>
</div>
<!-- This is the banner-->
<div class="blog">
<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='boton-inicio'><a href="default.asp" target="_blank">join</a></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>
下一步将是段落和其他内容:)
鉴于我已经完成了相应的研究，希望这个问题不会被否决。
我正在尝试开发一个用于练习的响应式网络并且它在 PC 上运行，每次我更改大小它都会按比例调整大小但是当我尝试进入我的phone（Samsung Galaxy S3 ) 它没有改变。
使用的技术是设置根字体大小并使代码的字体大小依赖于它。为整个博客设置一个容器（设置 height: 100%）并使用百分比 (%) 作为子项的高度和宽度，并为 phone 的屏幕尺寸使用媒体查询。
我得到这个输出：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>
是的，就像第一个答案所说的那样，我需要 <meta name="viewport" content="width=device-width, initial-scale=1"> head 标签以使网站响应移动访问，还想更新代码，添加一些内容，例如横幅内的链接和第一张图片的按钮。
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
font-size: 16px;
height: 100%;
}
.blog {
height: 100%;
}
.banner {
background: rgb(48, 49, 51);
width: 100%;
top: 0;
position: fixed;
z-index: 999;
}
.banner a:link, a:visited {
color: white;
font-size: 1.25rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-weight: 100;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
padding-left: .85rem;
padding-right: .85rem;
}
.banner a:hover, a:active {
background-color: rgb(221, 228, 230);
color: rgb(48, 49, 51);
}
#inicio.contenedor-imagen{
display: block;
margin-top: 1.25rem;
width: 100%;
min-height: 12.5rem;
height: 40rem;
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;
}
.boton-inicio {
top: 90%;
left: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);
background-color: rgba(48, 49, 51, 0.7);
text-align: center;
}
.boton-inicio a:link, a:visited {
font-family: 'Oswald', sans-serif;
color: white;
text-transform: uppercase;
display: inline-block;
font-size: 1.25rem;
padding: 0.625rem 1rem;
text-decoration: none;
}
.boton-inicio a:hover, a:active {
background-color: rgb(221, 228, 230);
color: rgb(48, 49, 51);
}
.blog p {
font-size: 1rem;
font-family: Verdana,sans-serif;
color: black;
width: 85%;
margin-top: 2rem;
margin-bottom: 1rem;
padding-left: 1rem;
}
@media only screen and (max-width: 480px) {
html, body {
font-size: 16px;
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">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- This is the banner-->
<div class="banner">
<a href="default.asp" target="_blank">home</a>
<a href="default.asp" target="_blank">about</a>
<a href="default.asp" target="_blank">clients</a>
<a href="default.asp" target="_blank">contact</a>
</div>
<!-- This is the banner-->
<div class="blog">
<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='boton-inicio'><a href="default.asp" target="_blank">join</a></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>
下一步将是段落和其他内容:)