我正在使用Chrome和Window Resizer by ionut botizan v 1.9.1.2
我使用原子开源编辑器，虽然我最初在phpstorm中创建了页面
我的问题
我可以点击窗口调整大小按钮，当我尝试调整移动版本时，页面会调整到ipad的大小，
高端windows手机，iphone和低端windows手机
浏览器窗口仍然是ipad系数1024 x 768的大小，只有一些页面元素允许我调整其宽度，我可以更改其他属性，即颜色，背景等。但是
标题，横幅和left_right_content的宽度，不会让步，调整大小
这也会导致能够向右滚动
我已经尝试了我制作的其他网站并且该插件工作正常，我也测试了一个实时网站，这似乎有效，这段代码中的东西停止调整大小，也许有人会注意到我错过的地方，欢迎任何帮助
<head>
<meta charset= "utf-8">
<meta name="descripton" content="kids at play"/>
<meta name= "keywords" content="kids, club, play, learn"/>
<meta name="robots" content=index,follow/>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<base href="http://localhost/Kids Club/Kids_Club.html"/>
<link rel="stylesheet" href="Kids_Club.css" type="text/css"/>
<title>html_5</title>
</head>
<body>
<div id="wrapper">
<div id="header"><img id ="img_header" src="jpg/kids_club_header.jpg" alt="kids club"/>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Playgroups</a>
<ul>
<li><a href="#">Under Fives</a></li>
<li><a href="#">Under Tens</a></li>
<li><a href="#">The Teens</a>
</ul>
</li>
<li><a href="#">Play & Learn</a>
<ul>
<li><a href="#">Field Trips</a></li>
<li><a href="#">Tutor Groups</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div id="banner"><img id ="img_banner" src="jpg/kids.jpg" alt="kids"/>
</div>
<div id="left_col_content">
<h2 class="top_title">Bring out the tiger in you</h2>
<h3 class="top_title">Activities for the Under Fives and Tens</h3>
<p>Is your little one sporty, and loves the challenge, then why not sign, him or her up for an afternoon of pure fun,
laughter and leisure at Bernie's tiger bar, where we work, rest and play all through out the day</p>
<img id ="left_column_img" src="jpg/tieger.jpg" alt="kids club"/>
<a href="" title="click me">more info</a>
</div>
<div id="right_col_content">
<h2 class="top_title">Play and Learn</h2>
<h3 class="top_title" >Activities for all</h3>
<p>Life is all about balance, and as we spend time feeding our minds, it is also important that we make
time for play.Our aim is to make learning not only fun, but a foundation were we can build and grow.
</p>
<img id ="right_column_img" src="jpg/Where-Children-Learn-Play-and-Grow.jpg" alt="play and learn"/>
<a href="" title="click me">more info</a>
</div>
<div id="newsflash">
<h2>Latest news</h2>
<p>Summer camp 2016 - The amazon, with a touch of carribean, Parents and siblings welcome, more info to come</p>
</div>
<div id="left_right_content"><h2 id="activity">What's On Today</h2>
<img id="jumeirah" src="jpg/jumeirah-beach.jpg" alt="jumeirah"/>
<img id="artandcraft" src="jpg/artandcraft.jpg" alt="artandcraft"/>
</div>
<div id="footer"></div>
</div>
</body>
</html>
body{
background-color: #024378;
}
#wrapper{
min-width:960px;
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: #e3f1f2;
}
#header,#img_header{
min-width: 960px;
width:100%;
min-height:100px;
height:12.5%;
}
.top_title{
color: #009fc0;
}
nav{
min-width:640px;
width: 70%;
margin-left:auto;
margin-right:auto;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #009fc0;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #ffffff;
}
nav ul li:hover a {
color: #96a4a5;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul li a:hover {
background: #ffffff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul ul {
background: #ffffff; border-radius: 0; padding: 0;
position: absolute; top: 100%;display:none;
}
/*images or divs that span across the page use margin left and right 'auto', divs that are smaller in size and form
columns within the page use set margins, i.e10px*/
#img_banner {
min-width:940px;
width: 100%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#banner{
min-width: 940px;
width: 73.4375%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#left_col_content{
float:left;
min-width: 420px;
width:32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent:10px;
padding: 2%;
}
#right_col_content{
float:left;
min-width: 420px;
width:32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent:10px;
padding: 2%;
}
#left_column_img, #right_column_img{
min-width: 200px;
width:15.625%;
min-height: 100px;
height:12.5%;
margin-left: auto;
margin-right: auto;
}
#newsflash{
clear:both;
min-width: 920px;
width:71.875%;
min-height:50px;
height:6.25%;
background-color: #009fc0;
margin-left: auto;
margin-right: auto;
color:#fff;
text-indent:10px;
padding: 1%;
}
#left_right_content{
min-width: 890px;
width: 69.53%;
margin: 10px auto;
height:300px;
background-color: #ffffff;
color: #06acef;
border: dashed #009fc0;
padding: 2%;
}
#activity {
border-bottom: dotted 3px #06acef;
}
#jumeirah{
clear: both;
float: left;
min-width:80px;
width: 47%;
padding: 10px;
}
#artandcraft{
clear: none;
float: right;
min-width:80px;
width: 47%;
padding: 10px;
}
#footer{
clear:both;
min-width: 940px;
width:73.4375%;
min-height:50px;
height:6.25%;
background-color: #009fc0;
margin:auto;
color:#fff;
text-indent:10px;
}
@media only screen and (min-width:0px) and (max-width:480px) {
/*low end windows phone*/
}
@media only screen and (min-width:481px) and (max-width:640px){
/*iphone*/
#header,#img_header{
width: 50%;
}
#left_col_content {
width: 58%;
}
#right_col_content{
clear: both;
width: 58%;
}
#newsflash{
width: 56%;
}
#left_right_content{
width: 58%;
}
}
@media only screen and (min-width:641px) and (max-width:768px) {
/*high windows phone*/
}
@media only screen and (min-width:769px) and (max-width:1024px) {
/*ipad*/
#left_col_content {
width: 94%;
}
#right_col_content{
width: 94%;
}
}
答案 0 :(得分：1)
将代码放在http://jsfiddle.net上以帮助我们实现可视化总是有帮助的。
我已将您的代码复制到https://jsfiddle.net/uhds3eac/
您使用的许多min-width属性应包含在媒体查询中，仅用于更大屏幕尺寸：
@media screen and (min-width:920px){
#newsflash {
min-width: 920px;
}
}
从移动开始，然后通过@media规则适应更大的屏幕通常是一个好主意。
注意：这不是问题，但您错过了一个起始<html>代码
答案 1 :(得分：0)
您的min-width语句看起来像是罪魁祸首，请尝试删除它们。
您仍然需要修改某些部分的width以使其看起来不错，但通常只尝试使用百分比值，而不是px。
body {
background-color: #024378;
}
#wrapper {
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: #e3f1f2;
}
#header,
#img_header {
width: 100%;
min-height: 100px;
height: 12.5%;
}
.top_title {
color: #009fc0;
}
nav {
width: 70%;
margin-left: auto;
margin-right: auto;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #009fc0;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #ffffff;
}
nav ul li:hover a {
color: #96a4a5;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul li a:hover {
background: #ffffff;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav ul ul {
background: #ffffff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
display: none;
}
/*images or divs that span across the page use margin left and right 'auto', divs that are smaller in size and form
columns within the page use set margins, i.e10px*/
#img_banner {
width: 100%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 73.4375%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#left_col_content {
float: left;
width: 32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent: 10px;
padding: 2%;
}
#right_col_content {
float: left;
width: 32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent: 10px;
padding: 2%;
}
#left_column_img,
#right_column_img {
width: 15.625%;
min-height: 100px;
height: 12.5%;
margin-left: auto;
margin-right: auto;
}
#newsflash {
clear: both;
width: 71.875%;
min-height: 50px;
height: 6.25%;
background-color: #009fc0;
margin-left: auto;
margin-right: auto;
color: #fff;
text-indent: 10px;
padding: 1%;
}
#left_right_content {
width: 69.53%;
margin: 10px auto;
height: 300px;
background-color: #ffffff;
color: #06acef;
border: dashed #009fc0;
padding: 2%;
}
#activity {
border-bottom: dotted 3px #06acef;
}
#jumeirah {
clear: both;
float: left;
width: 47%;
padding: 10px;
}
#artandcraft {
clear: none;
float: right;
width: 47%;
padding: 10px;
}
#footer {
clear: both;
width: 73.4375%;
min-height: 50px;
height: 6.25%;
background-color: #009fc0;
margin: auto;
color: #fff;
text-indent: 10px;
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
/*low end windows phone*/
}
@media only screen and (min-width: 481px) and (max-width: 640px) {
/*iphone*/
#header,
#img_header {
width: 50%;
}
#left_col_content {
width: 58%;
}
#right_col_content {
clear: both;
width: 58%;
}
#newsflash {
width: 56%;
}
#left_right_content {
width: 58%;
}
}
@media only screen and (min-width: 641px) and (max-width: 768px) {
/*high windows phone*/
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
/*ipad*/
#left_col_content {
width: 94%;
}
#right_col_content {
width: 94%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="descripton" content="kids at play" />
<meta name="keywords" content="kids, club, play, learn" />
<meta name="robots" content=index,follow/>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<base href="http://localhost/Kids Club/Kids_Club.html" />
<link rel="stylesheet" href="Kids_Club.css" type="text/css" />
<title>html_5</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img id="img_header" src="jpg/kids_club_header.jpg" alt="kids club" />
</div>
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li>
<a href="#">Playgroups</a>
<ul>
<li><a href="#">Under Fives</a>
</li>
<li><a href="#">Under Tens</a>
</li>
<li><a href="#">The Teens</a>
</ul>
</li>
<li>
<a href="#">Play & Learn</a>
<ul>
<li><a href="#">Field Trips</a>
</li>
<li><a href="#">Tutor Groups</a>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</nav>
<div id="banner">
<img id="img_banner" src="jpg/kids.jpg" alt="kids" />
</div>
<div id="left_col_content">
<h2 class="top_title">Bring out the tiger in you</h2>
<h3 class="top_title">Activities for the Under Fives and Tens</h3>
<p>Is your little one sporty, and loves the challenge, then why not sign, him or her up for an afternoon of pure fun, laughter and leisure at Bernie's tiger bar, where we work, rest and play all through out the day
</p>
<img id="left_column_img" src="jpg/tieger.jpg" alt="kids club" />
<a href="" title="click me">more info</a>
</div>
<div id="right_col_content">
<h2 class="top_title">Play and Learn</h2>
<h3 class="top_title">Activities for all</h3>
<p>Life is all about balance, and as we spend time feeding our minds, it is also important that we make time for play.Our aim is to make learning not only fun, but a foundation were we can build and grow.
</p>
<img id="right_column_img" src="jpg/Where-Children-Learn-Play-and-Grow.jpg" alt="play and learn" />
<a href="" title="click me">more info</a>
</div>
<div id="newsflash">
<h2>Latest news</h2>
<p>Summer camp 2016 - The amazon, with a touch of carribean, Parents and siblings welcome, more info to come</p>
</div>
<div id="left_right_content">
<h2 id="activity">What's On Today</h2>
<img id="jumeirah" src="jpg/jumeirah-beach.jpg" alt="jumeirah" />
<img id="artandcraft" src="jpg/artandcraft.jpg" alt="artandcraft" />
</div>
<div id="footer"></div>
</div>
</body>
</html>
尝试研究Mobile First Design以了解更多信息。