个人中心
gpt4 book ai didi

android - android 上的网页布局

转载 作者：行者123 更新时间：2023-11-28 02:41:16 25 4
gpt4 key购买 nike

鉴于我已经完成了相应的研究，希望这个问题不会被否决。

我正在尝试开发一个用于练习的响应式网络，它在 PC 上运行，每次我更改大小时它都会按比例调整大小，但是当我尝试在我的手机 (Samsung Galaxy S3) 上输入时它没有改变。

使用的技术是设置根字体大小并使代码的字体大小依赖于它。为整个博客设置一个容器(设置 height: 100%)并为 child 的高度和宽度使用百分比 (%)，并为手机屏幕尺寸使用媒体查询。

我得到这个输出: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>

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

关于android - android 上的网页布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44222926/

25 4 0
文章推荐： javascript - 我收到警报错误的 js fiddle 配置
文章推荐： html - 使用 xpath 从表中抓取和提取数据
文章推荐： c++ - 函数定义在类外部时出现链接器错误
文章推荐： javascript - 如何从 localStorage 中检索信息以传递给数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com