Question

希望这个问题不会因为我已经完成相应的研究而被推翻。

我正在尝试开发一个用于练习的响应式网络，并且它在个人电脑上运行，每次我改变尺寸时它会按比例调整大小但是当我尝试进入手机时（三星Galaxy S3）它没改变。

使用的技术是设置根字体大小并使代码的字体大小依赖于它。为整个博客设置容器（设置height: 100%）并使用百分比（％）表示孩子的身高和宽度，并使用媒体查询来查看手机的屏幕尺寸。

我得到了这个输出：image

可能是什么问题？我对评论家和编码提示持开放态度。

＆＃13;

* {
  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%;
  }

＆＃13;

<!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>

＆＃13;

Answer 1

是的，就像第一个回答所说的那样我需要<meta name="viewport" content="width=device-width, initial-scale=1">头标记以使网站对移动访问做出响应，还想更新代码，添加一些内容，例如横幅内的链接和第一张图片＆＃39; s按钮。

＆＃13;

* {
  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%;
  }

＆＃13;

<!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>

＆＃13;

下一步将是段落和其他内容:)

Android

1 个答案: