个人中心
gpt4 book ai didi

css - 媒体查询触发但元素不流动

转载 作者：行者123 更新时间：2023-12-05 01:13:11 25 4
gpt4 key购买 nike

我是编码的新手，所以请原谅我的简单问题。

我正在尝试在网站中实现媒体查询以使其完全“响应”，尽管遵循了许多教程，但似乎遇到了一个非常基本的问题，这无疑很容易解决，但由于我缺乏经验，这对我来说还是个谜。

本站采用960网格系统搭建，下面是我的媒体查询css页面。

基本上，我可以让媒体查询正常工作，例如当浏览器缩小到 960px 或更小时，网站对媒体查询 css 做出正确 react (页面变为宽度:94% 和左右边距的 3% )，但随着页面继续调整大小，它不是“流动的”并且不遵循浏览器边缘。它基本上保持在 960px，(而不是缩小)直到触发下一个媒体查询(650px)。 Width:auto 似乎不起作用，因为目前媒体查询仅在宽度设置为每种分辨率的百分比或像素等时调整页面大小。

下面是css和html，再次请原谅我这个大概是新手编码，这是我的第一个网站。

非常感谢=]

@media screen and (max-width: 960px) {


.container_12 {
width: 94%;
 margin: 0 3% 0 3% ;}

#header {
width: 100%;}

.grid_10 alpha omega {
width:78%;} 

}




@media screen and (max-width: 650px) {


#header {
width: auto;}

.grid_10 alpha omega {
width: auto;}   



}


@media screen and (max-width: 480px) {



#header {
width: auto;}

.grid_10 alpha omega {
width: auto;}   



}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta    name="viewport" content="width=device-width" />
<title>title</title>


<link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>

<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="960.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="media-queries.css" />



</head>
<body>


<div class="container_12" id="container">
<div id="header">
<div class="grid_2 alpha" id="logo">
<h1><a href="/">Home</a></h1></div>

<div class="grid_3  omega" id="navigation">
<ul class="navigation">

<li><a href="/menu1/">menu 1</a></li>

<li><a href="/menu2/">menu 2</a></li>

</ul>
</div>



</div>
<div class="grid_10 alpha omega" id="maincontent">
<h2>hello<a href="/menu1.html" class="h2bold"> world.</a> Lorem Ipsum.</h2>
<p>Lorem Ipsum.<br>
Lorem Ipsum.</p>


</div>
</div>

</body>

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

</html>

更新:这是我的主要 styles.css，因为我提供的内容似乎无法复制这个问题。

@charset "utf-8";
/* CSS Document */

/***************** Page Styles ***************/

body    {
 background-color:#deeee9;

}

.container_12 {
 background-color:#fefefe;
}


p {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
line-height: 18px;

}

p a:link {
text-decoration:none;
font-weight:bold;
color:#000000;

}

p a:hover {
text-decoration:none;
font-weight:bold;
color:#fa5e45;

}

p a:visited {
text-decoration:none;
font-weight:bold;
color:#333;

}

h2 {
padding: 120px 0 13px 0;
font-size:23px;
font-family: 'Quicksand', sans-serif;
letter-spacing: -1px;
font-weight:100;
}

h3 {
padding: 0 0 3px 0;
font-size:19px;
font-family: 'Quicksand', sans-serif;
letter-spacing: -1px;
font-weight:100;
}


h2 a:link   {
font-family: 'Quicksand', sans-serif;
color:#000000;
text-decoration:none;
font-weight:bold; 
}

h2 a:hover  {
font-family: 'Quicksand', sans-serif;
color:#fa5e45;
text-decoration:none; 
}


/******************************  Header ********************************/

#header {
 height: 100px;
 margin-bottom: 120px;
 border-bottom: 1px dashed;

}

#logo   {
 text-indent:-9999px;
}

#logo a {
 display: block;
 margin-top:15px;
 border: none;
 background: transparent url(images/logo.png)  no-repeat;
 width: 76px;
 height: 76px;
 border-image: initial;
}



#navigation {
 float:right;
}


.navigation {
 margin: 0;
 padding: 0;
 list-style-type: none;
 float: right; 
}


.navigation li {
 margin: 0;
 padding: 0;
 display: inline;
 float: left;

}

.navigation a:link {
text-decoration:none;
color: #000000;

}

.navigation a:hover {
text-decoration:none;
color: #fa5e45;
}


.navigation a {

margin-top: 30px;
width: 100px;
height: 47px;
border: none;
line-height: 47px;
float: right;
font-family: 'Quicksand', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
text-align: right;
text-decoration: none;

}


/****************************  Homepage ******************************/





#maincontent p {
font-family: 'Quicksand', sans-serif;
font-size:19px;
line-height: 24px;
letter-spacing: -1px;
}

#maincontent p a:link   {
font-family: 'Quicksand', sans-serif;
color:#000000;
text-decoration:none; 
font-weight:bold;
}

#maincontent p a:hover  {   
font-family: 'Quicksand', sans-serif;
color:#fa5e45;
text-decoration:none; 
}


/****************************  menu 1******************************/ 

.workwrapper {
display:block;
clear:both;

}

.workwrapper p{
padding-top:13px;

}

.workurl {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;


}

.workurl a{
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
font-weight: bold;
text-decoration:none;
color:#fa5e45;

}

.workurlnull {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;


}

.workurlnull a{
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
font-weight: bold;
text-decoration:none;
color:#999;

}


.workexample {

float:right;
}


.image {
padding-bottom: 40px;
position:relative;
float:right;
text-align:right;
}

/****************************  menu2 ******************************/

.multicolumn1 {

-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:;
}

.aboutimg {
padding-top: 30px;
}

#aboutimg2 {
padding: 30px 4px 0 4px;

}

最佳答案

它在 Chrome 中似乎对我来说工作正常。我做了一个 Dabblet 的 here

关于css - 媒体查询触发但元素不流动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9486610/

25 4 0
文章推荐： xcode - 使用 CFBundleGetVersionNumber
文章推荐： scala - 如何在 Scala 中实现 string.replaceAll 链
文章推荐： django - 如何阻止 Django 向呈现的小部件添加额外的 html 元素
文章推荐： Web 可访问性和 h1-h6 标题 - 所有内容都必须在这些标签下吗？
行者123
个人简介

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

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