我一直在使用 html/css，但我遇到了 html css 的问题。在移动设备中，我的 html/css 看起来像这样:
http://i.imgur.com/EwD0zIJ.png
我已经指出了这个问题。为什么会这样？
我的 HTML:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1.6;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
—————————————————————————————————————————————————————————————————————————————————
*/
html {
background: #000000;
background: url(back.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#portrait {} body {
text-align: left;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 10pt;
width: 380pt;
margin: 32pt;
letter-spacing: 0.3px;
color: rgba(255, 255, 255, 0.8);
}
#imagebox {
text-align: left;
margin: 2pt;
transition: 0.5s all ease;
}
p {
padding-bottom: 1.2em;
}
h1 {
font-size: 20pt;
margin-top: 10pt;
margin-bottom: 3pt;
font-weight: 200;
}
h2 {
margin-top: 20pt;
font-weight: 500;
font-size: 12pt;
}
ul {
list-style-type: none;
}
a:link {
/* color: #00aaff;*/
text-decoration: none;
transition: 1s all ease;
color: rgba(255, 255, 255, 0.6);
}
a:visited {
color: rgba(255, 255, 255, 0.6);
transition: 2s all ease;
}
a:hover {
color: #00aaff;
transition: 0.2s all ease;
}
/*
—————————————————————————————————————————————————————————————————————————————————
*/
/* iPad */
@media screen and (max-width: 640pt) {
html {
background: url(back.jpg) no-repeat left center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#portrait {
background: url(back.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
background-size: 100%;
height: 260px;
padding-left: 40px;
padding-top: 40px;
}
body {
width: 100%;
margin: 0;
font-size: 12pt;
background-color: rgb(19, 19, 19);
height: 100%;
}
#imagebox {
transition: 0.5s all ease;
margin: 30pt 30pt 0pt 32pt;
}
#box {
margin: 0pt 30pt 30pt 30pt;
}
}
/* iPhone */
@media screen and (max-width: 320pt) {
body {
width: 100%;
margin: 0;
font-size: 10pt;
}
#portrait {
height: 150px;
}
#imagebox {
text-align: center;
margin: 24pt;
}
/*
#box {
margin: 20pt;
}
h1 {
font-size: 13pt;
text-align: center;
padding-bottom: 50px;
font-weight: 200;
letter-spacing: 0.3em;
text-transform: uppercase;
}
*/
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Robert Padbury</title>
<meta name="description" content="Robert Padbury is an Australian American Designer.">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<div id="portrait">
<img src="logo.png" width="31" height="40" alt="Robert Padbury" />
</div>
<div id="box">
<h1>Robert Padbury</h1>
<p>G'day! I am a Freelance Australian American Designer based in San Francisco, California. I focus on Human Interface Design (UI/UX), Icon Design, Identity & Branding, and Special Projects.</p>
<p>I have worked in various capacities for companies including <a href="http://www.apple.com/">Apple</a>, <a href="http://www.instagram.com/">Instagram</a>, <a href="http://www.facebook.com/">Facebook</a>, <a href="http://www.uber.com">Uber</a>, <a href="http://en.wikipedia.org/wiki/Stipple_(company)">Stipple</a>,
<a
href="http://www.doubletwist.com">DoubleTwist</a>, <a href="http://en.wikipedia.org/wiki/Tapulous">Tapulous</a>, <a href="http://www.cooliris.com">Cooliris</a>, and <a href="http://www.revision3.com">Revision3</a>. Way back in the day, I was a Production Intern for <a href="http://en.wikipedia.org/wiki/X-Play">X-Play</a>.</p>
<p>If you would like to work together, please feel free to send me an <a href="mailto:robert@padbury.me">email</a>.</p>
<h2>Projects</h2>
<ul class="social">
<li><a href="http://padbury.me/clock/">Clock Screen Saver for OS X</a>
</li>
<li><a href="https://www.kickstarter.com/projects/padbury/atelier-playing-cards">Atelier Playing Cards</a> — <a href="https://docs.google.com/forms/d/1p2MvVyAUzEZf6PWc8iZDT2Vsbskfaf4cAurJf_QbzmM/viewform?usp=send_form">Waiting List</a>
</li>
<li><a href="https://www.buyolympia.com/q/Item=rands-v3">Rands in Repose T-Shirt</a> — <a href="https://www.buyolympia.com/q/Item=rands-v3-special-gun-metal">Limited Edition</a>
</li>
<li><a href="http://www.snapchat.com/add/modelhousetv">Model House Ibiza on Snapchat</a>
</li>
</ul>
<h2>Social Media</h2>
<ul class="social">
<li><a href="https://workingnotworking.com/padbury">Working Not Working</a>
</li>
<li><a href="http://www.instagram.com/padbury">Instagram</a>
</li>
<li><a href="http://www.dribbble.com/padbury">Dribbble</a>
</li>
<li><a href="http://www.twitter.com/padbury">Twitter</a>
</li>
<li><a href="http://www.linkedin.com/in/padbury">LinkedIn</a>
</li>
<li><a href="http://www.imdb.com/name/nm1599346/?ref_=fn_al_nm_1">IMDB</a>
</li>
</ul>
<br />
<p>Photo by <a href="https://twitter.com/tristan">Tristan O’Tierney</a>.</p>
</div>
</body>
</html>我该如何解决这个问题？ 谢谢
最佳答案
在这个媒体查询中 @media screen and (max-width: 640pt) 改变这个:
width: 100% 到这个 max-width: 100%;。我在您的网站上对其进行了测试，并且有效。
关于html - 响应式设计，最大宽度不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39806477/