简单的 html 没有手机响应，不知道为什么
[英]Simple html not phone responsive, can't figure out why
问题描述
我有我开发的这个非常简单的网络。 我在这里使用了类似问题中提供的所有编码和提示，但没有运气。 网络运行正常并且经过验证，但 div 不会调整大小以适合手机。 任何人都可以快速浏览一下并给我一些指示吗？ 非常感激。
这是 HTML 代码：
@import url(//db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light); @font-face { font-family: "Adieu Light"; src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot"); src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot?#iefix") format("embedded-opentype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff2") format("woff2"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff") format("woff"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.ttf") format("truetype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.svg#Adieu Light") format("svg"); } .body, html { height: 100%; margin: 0; background-image: url("Home-bck.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .full { padding: 0; margin: 0; position: absolute; top: 50%; left: 50%; transform: translateX(-50%)translateY(-50%) } .tromper { display: flex; justify-content: center; margin-top: auto; margin-bottom: 0px; color: #686868; font-family: adieu light; font-size: 28px; } .better { display: flex; justify-content: center; margin-top: -39px; color: #707070; font-family: Adieu light; } .social ul { display: flex; position: absolute; justify-content: center; right: 50%; left: 44%; list-style: none; } .social ul li { margin-top: 0; margin-right: 15px; margin-left: 15px; margin-bottom: 30px; } .social ul li .fa { font-size: 70px; line-height: 60px; color: #626262; } .social ul li .fa-instagram:hover { color: #bfeefd; transition: .5s; transform: translate(0, -10px) rotate(360deg); } .social ul li .fa-linkedin:hover { color: #bfeefd; transition: .5s; transform: translate(0, -10px) rotate(360deg); } .Contact { display: flex; justify-content: center; margin-top: 70px; margin-right: auto; margin-left: auto; margin-bottom: 0; color: #626262; font-family: Adieu Light; font-size: 24px; } .clients { display: flex; justify-content: center; } /* Media Queries: Tablet Landscape */ @media screen and (max-width: 1060px) { #primary { width:67%; } #secondary { width:30%; margin-left:3%;} } /* Media Queries: Tabled Portrait */ @media screen and (max-width: 768px) { #primary { width:100%; } #secondary { width:100%; margin:0; border:none; } } img { max-width: 100%; height: auto; } @media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } } html { font-size:100%; } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
<!DOCTYPE html> <html> <head> <style></style> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="HandheldFriendly" content="true"> <meta charset="utf-8"> <title>Tromper&Tromper</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link href="https://db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="full container"> <div class="tromper"> <h1>TROMPER&TROMPER</h1> </div> <div class="better"> <h3>"BETTER TOGETHER"</h3> </div> <div class="social"> <ul> <li> <a href="https://www.instagram.com/tromperandtromper/?hl=es" target="_blank"> <i class="fa fa-instagram"></i> </a> </li> <li> <a href="https://www.linkedin.com/company/tromper-and-tromper-works" target="_blank"> <i class="fa fa-linkedin"></i> </a> </li> </ul> </div> <a href="mailto:whatever@whatever.com" style="text-decoration:none" target="_blank"> <div class="Contact"> <h4>CONTACT US</h4> </div> </a> <div class="clients"></div> </div> </body> </html>3 个解决方案
解决方案1
1 已采纳 2020-10-02 13:49:35
你的 div 的原因是不能调整大小，因为 h1 标签。 您可以尝试使用以下方法修改您的 css 文件：
/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
h1 {font-size: 7vw;} /* <- HERE */
}
但是，您的代码不是语义的。 随着时间的推移尝试改善这一点。
解决方案2
-1 2020-10-02 13:25:57
我会发表评论，因为我不确定这是否是正确的答案，但不幸的是我不被允许。
我不想冒犯您或您的经验水平，但您似乎不知道 css 是如何工作的？ 或者也许你只是没有看就复制了。
您可以使用媒体查询使网站响应迅速。 当然看你的需求了。 使 div 具有响应性的最简单方法是给它们一个带有 % 的宽度。 因此，如果您给他们说 90%，那么当屏幕（或窗口）为 1000 像素等时，他们只会获得 900 像素的宽度。
当您使用媒体查询时，因为可能 div 需要更小或更大，或者您使用绝对数字（如像素左右），您还需要使用您的类和 ID。
现在在您的媒体查询中，我看到两个 ID“主要”和“次要”，因为使用 # 您声明这是一个 ID，而在您的 HTML 中我根本看不到任何 ID。 那么浏览器应该如何知道，在哪里应用您的 CSS？
现在，我并不声称自己是专业的 CSS 用户，因此“#primary”可能是某种特殊命令，但就目前而言，我会说至少存在您的一个问题。
你也使用了很多 flex，我真的不知道为什么？ 您还可以使用容器、部分、文章等来处理您的 HTML，但那是另一回事。
解决方案3
-1 2020-10-02 13:42:59
我同意 bibleblade，我想补充一点，你使用“屏幕”很奇怪，有时只是不添加它。 也许尝试与此更加一致。 另外，通过添加“屏幕”，你说明这只会看起来像这样，如果它在屏幕上，所以它不会在打印机上工作，这是非常不必要的，所以我只想删除“屏幕”所以它默认为“all”和底部的最后一个媒体查询字体大小。 是不必要的，因为您可以通过vw或vh来设置相对于屏幕的字体大小，或者只使用像夹子这样的东西
我无法弄清楚为什么我添加事件处理程序的简单尝试无效
[英]I can't figure out why my simple attempt at adding an event handler isn't working
HTML和CSS-似乎无法弄清为什么下拉菜单不起作用。
[英]HTML & CSS - Can't seem to figure out why drop-down menu isn't working.
React.js，HTML，CSS：无法弄清楚为什么 align-items 不起作用
[英]React.js, HTML, CSS: can't figure out why align-items doesn't work
似乎无法弄清楚为什么DIV不适用于整个部分，PHP / HTML DIV问题
[英]Can't seem to figure out why the DIV isn't applying to entire section, PHP/HTML DIV issue
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.