Не работают media запросы
316
27 февраля 2017, 11:06
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,900');
*{
font-family: 'Lato', sans-serif;
}
.navbar{
margin-bottom: 0px;
}
.top-menu a{
font-size:14px;
color: #5f5f5f;
}
.top-menu li{
position:relative;
}
.top-menu li+li:before{
content:"";
position:absolute;
height:15px;
width:1px;
background-color:#999;
display:block;
left:0;
top:17px;
}
.top-menu a:hover{
color:#0c7ff6;
}
.callback {
padding: 15px;
text-transform: uppercase;
float: right;
}
.line{
width: 100%;
height: 1px;
background-color: #dddddd;
}
.middle{
margin-top: 15px;
}
.middle input[type=search]{
margin-top: 3px;
width: 350px;
border: 1px solid #eeeeee;
padding: 15px;
}
.search{
position: relative;
}
.fa-search{
color:#0c81f6;
font-size: 1.3em;
right: 20px;
top:20px;
position: absolute;
}
/*========== Desktop First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
.top-menu a{
font-size: 12px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar">
<div class="container">
<div class="row">
<ul class="top-menu col-sm-10 nav navbar-nav">
<li><a href="#">Главная</a></li>
<li><a href="#">Сотрудничество</a></li>
<li><a href="#">Гарантия</a></li>
<li><a href="#">Доставка и оплата</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
</ul>
<a class="callback col-sm-2" href="#">Заказать звонок</a>
</div>
</div>
</nav>
<div class="line"></div>
<div class="container middle">
<div class="row">
<div class="col-md-2">
<a href="#"><img class="logo" src="./img/logo.png" alt="logo"></a>
</div>
<div class="col-md-4 col-sm-6 col-md-offset-1">
<form class="search" action="">
<input type="search" placeholder="Поиск...">
<span class="fa fa-search" aria-hidden="true">
</span>
</form>
</div>
</div>
</div>
</header>
<script src="js/bootstrap.min.js"></script>
</body>
</html>media.css подключены после style.css, не пойму в чем дело.
Answer 1
Привет!
only screen - экран монитора
а only handheld - смартфоны
P.S: Тут есть список для мобильных устройств - https://htmlweb.ru/css/media_screen.php
Answer 2
Вы пропустили закрывающую скобку:
В результате получили выражение, которое невозможно (max-width : 768px and min-width : 992px)
-
07:09
-
17:51
-
08:01
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46748 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30302 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22894 visits
- Как через css изменить цвет png изображения? 10176 visits
- Blob video url download 9805 visits
- Php curl запрос через прокси с авторизацией 9064 visits
- Работа с captcha vk api 7981 visits
![Оцените верстку [требует правки]](https://hostciti.net/images/nophoto.png "Оцените верстку [требует правки]")
© "hostciti.net" 05.5.2024 | 17:40