LINUX.ORG.RU

не подтягивает @media max-width 600px

 , ,


0

1

Котаны, такая тема, заодно может подскажите как лучше собрать. Есть nav в нём div с лого и свойством float: left; а по правой стороне идут якоря на экраны, ну как у всех. Сорян за простыню, но под кат код скрывать не хочет. Кароче в тогле (Chrome) на федоре скрывает при 600px, если скролить через ctrl тоже срабатывает, проверил на винде если скролить - скрывает, а если в тогле выставлять 600px то нет, просто не подтягивает правила. Затестил на двух самсунгах galaxy, один на хроме, второй на родном браузере. Код выглядит вот так:

html

<nav class="nav right">
  <div id="name">CYY Robotics</div>
  <ul>
    <li class="current"> <!--SVG иконка гамбургера-->
      <svg style="background:none;width:2em;height:1.6em;stroke:cyan;stroke-linecap: round;stroke-width:5px;padding-top: -5px;">
        <line x1="5" y1="5" x2="36" y2="5"/>
        <line x1="5" y1="16" x2="36" y2="16"/>
        <line x1="5" y1="28" x2="36" y2="28"/>
	  </svg>
	</li>
	  <li><a href="#compa">COMPARISON</a></li>
      <li><a href="#fie">FIELDS</a></li>
      <li><a href="#achi">ACHIVEMENTS</a></li>
      <li><a href="#find">FIND US</a></li>
	</ul>
</nav>

css

@media screen and (max-width: 1920px) {
@font-face {
  font-family: Enduline;
  src: url(assets/fonts/edunline.ttf);}
@font-face {
  font-family: Roboto;
  src: url(assets/fonts/Roboto-Regular.ttf);}
body {
  margin: 0 auto;
  font-family: Roboto;
  background-color:rgb(100,100,100); 
}
.nav {
	position: relative;
	margin:0 auto;
}
#name {
  font-family: Enduline;
  font-size: 3em;
  padding: .1em 0em 0em 1em;
  margin: 0;
  color: cyan;
  border:none;
  float: left;
}
#name:hover {
  color: white;
}
#name:active {
  color:cyan;
}
.nav ul {
	margin: 0;
	padding: 1em 1em;
}
.nav li {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0 5px 10px 0;
  padding: 0;
  list-style: none;
  display: inline-block;
}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: white;
	line-height: 100%;
}
.nav a:hover {
	color: cyan;
}
.nav .current {
	background: none;
	display: none;
}
.nav.right ul {
	text-align: right;
}
}

@media screen and (max-width: 1366px) {
/* nav */
@font-face {
  font-family: Enduline;
  src: url(assets/fonts/edunline.ttf);}
@font-face {
  font-family: Roboto;
  src: url(assets/fonts/Roboto-Regular.ttf);}
body {
  margin: 0 auto;
  font-family: Roboto;
  background-color:rgb(100,100,100); 
}
.nav {
	position: relative;
	margin:0 auto;
}
#name {
  font-family: Enduline;
  font-size: 3em;
  padding: .1em 0em 0em 1em;
  margin: 0;
  color: cyan;
  border:none;
  float: left;
}
#name:hover {
  color: white;
}
#name:active {
  color:cyan;
}
.nav ul {
	margin: 0;
	padding: 1em 1em;
}
.nav li {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0 5px 10px 0;
  padding: 0;
  list-style: none;
  display: inline-block;
}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: white;
	line-height: 100%;
}
.nav a:hover {
	color: cyan;
}
.nav .current {
	background: none;
	display: none;
}
.nav.right ul {
	text-align: right;
}
}

@media screen and (max-width: 600px) {
	.nav {
		position: relative;
		min-height: 40px;
	}	
	.nav ul {
		width: 180px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
	}
	.nav li {
		display: none; 
		margin: 0;
	}
	.nav .current {
		display: block; 
		padding-right: 1em;
	}
	.nav a {
		display: block;
		padding: 5px 15px 5px 32px;
		text-align: right;
	}
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
}

Что хотел сказать автор?

anonymous ()
Ответ на: комментарий от anonymous

что если подогнать в отладчике Хрома данный код под разрешение в 600px то он работает, а если непосредственно на смартфоне - то не работает.

ghett ()

Удивлён, но киберфорум помог! Оказалось, забыл добавит width devicewidth initialscale

ghett ()
Ответ на: комментарий от pi11

работает, читай пост выше, правда, в горизонтальном режиме тоже скрывает, хотя 840 ...

ghett ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.