Я очень новичок в кодировании, так что простите мой, надеюсь, простой вопрос.
Я пытаюсь внедрить медиа-запросы в веб-сайт, чтобы сделать его полностью "отзывчивым", и, несмотря на то, что после многочисленных уроков, похоже, оченьосновная проблема, которая без сомнения легко решается, но для меня загадка из-за моей неопытности.
Сайт построен с использованием системы сетки 960, ниже вы можете найти страницу css моих медиа-запросов.
По сути, я могу заставить медиазапросы работать, если, например, размер браузера уменьшен до 960 пикселей или меньше, сайт корректно реагирует на css медиазапроса (страница становится шириной: 94% и левым правым полем 3%) но поскольку размер страницы продолжает меняться, она не «плавная» и не соответствует краю браузера.Обычно он остается на уровне 960 пикселей (вместо уменьшения) до следующего медиазапроса (650 пикселей).Ширина: авто, кажется, не работает, так как в настоящее время медиазапросы изменяют размер страницы только тогда, когда ширина установлена в процентах или пикселях и т. Д. Для каждого разрешения.
Ниже приведены 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;
}