Изменение кнопки меню в адаптивной вёрстке

@kemira · Регистрация: 22.09.2015

Author24 — интернет-сервис помощи студентам

Добрый день.

Помогите, пожалуйста, разобраться, никак не могу сделать так, чтобы на маленьких экранах кнопки становились меньше. Конструкция кнопок выглядит таким вот образом. Как прописать при:

CSS

1	@media screen and (max-width: 700px) and (min-width: 300px){

их уменьшение? Кнопки даже не думают уменьшаться, просто переносятся в строку, а размер картинок не меняется. Пробовал уже всякое найденное в сети, но ни в какую не меняется размер.

Нужно сделать их адаптивными. Просто картинку адаптивной могу сделать, картинку в виде ссылки могу сделать, но нужно чтобы при наведении картинка менялась, а из-за этого она становится тегом "<a href=...", а в нём картинка указывается через "background: url", а к нему не достучаться.

Пробовал даже такие штуки, не помогает...

CSS

background: url(background.png) no-repeat;
-webkit-background-size: 100%;
-o-background-size: 100%;
-moz-background-size: 100%;
-ms-background-size: 100%;
-khtml-background-size: 100%;
background-size: 100%;

Структура кнопок примерно такая:

CSS

a.menu1 {
    display: inline-block;
    background: url(images/menu1.png);
    width: 100px;
    height: 60px;
    }
 
a.menu1:hover {
    background: url(images/menu2.png);
    transition: all 900ms ease-out;
   }

HTML5

<table>
<tr>
    <td class="menu">
`           <a href="#" class="menu1"> </a>
    </td>
</tr>
</table>

@mrtoxas · 07.08.2016, 12:28

CSS

a.menu1 {
    display: inline-block;
    border:1px solid black;
    width: 100px;
    height: 60px;
    }
 
@media screen and (max-width: 700px) and (min-width: 300px){  
  a.menu1{
    width: 50px;
    height: 30px;
  }
}

HTML5

1	<a href="#" class="menu1">link</a>

И не забываем в body указывать

HTML5

1	<meta name="viewport" content="width=device-width, initial-scale=1">

Результат

@Kenworth · 07.08.2016, 12:32

Залей свой код на песочницу и предоставь изображение как выглядит кнопка

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	07.08.2016, 12:32	3
	Залей свой код на песочницу и предоставь изображение как выглядит кнопка 0