Не могу понять резиновую верстку

@nikelodion · Регистрация: 14.02.2015

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

Добрый день. Сверстал по psd страницу. На макете ширина сетки 1170px, он должен быть резиновым.
Получается так

HTML5

<body>
     <div class="block-1">
        <div class="header"></div>
     </div>
</body>

В стилях я пишу следующее

CSS

.block-1 {
  width:100%;
  height:300px;
  background:#e2e2e2;
   }
.header {
  max-width:1170px;
  height:300px;
  margin: 0 auto;
    }

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

PS модераторы не сносите тему, из-за того что я только зарегестрировался и не отправил еще 5 сообщений. Спасибо

@N1keo · 18.02.2015, 05:15

По читай про Bootstrap 3 и будет тебе вёрстка адаптивная. а всё что не так как надо выравнивается, корректируешь через media queries (о5 же почитай и видео на youtube посмотри).

@Taatshi · 18.02.2015, 12:01

Сообщение от nikelodion

PS модераторы не сносите тему, из-за того что я только зарегестрировался и не отправил еще 5 сообщений. Спасибо

С чего бы сносить?))

nikelodion, дайте ссылку на сайт. Скорее всего, Вы что-то неправильно делаете.

@nikelodion · 18.02.2015, 12:13 **[ТС]**

Он у меня на компьютере))
Я уже вроде как разобрался. Резина работает, но после 1170px при уменьшении окна начинают элементы друг на друга залазить. Я сделал с помощью media запросов. @media screen and (min-width:800px) and (max-width:1169px) - один дизайн, @media screen and (min-width:480px) and (max-width:799px) - другой дизайн, @media screen and (min-width:320px) and (max-width:479px) - для мобильных.
Так правильно??? Кстати почему шрифты некоторые в опере и хроме отображаются в разных размерах? разница 0.1em

@Goal · 18.02.2015, 13:22

Шрифты отображаются потому что движки разные, опять таки это зависит от того, в каких единицах ты указываешь размер шрифта.

Для задания размера рекоммендую:

CSS

1
2
3

.demo {
    font-size: 3vw; /* 3% шириниы viewport*/
}

Полезно:

HTML5

1	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

@nikelodion · 18.02.2015, 13:24 **[ТС]**

@Goal · 18.02.2015, 13:26

Почитай, полезная ссылка http://css-tricks.com/viewport-sized-typography/

@nikelodion · 18.02.2015, 18:00 **[ТС]**

Появилась новая проблема
есть

HTML5

1	<a href="#" class="icon_menu"></a>

с иконкой на которую нужно нажимать, чтоб выскакивал блок

HTML5

<div id="nav" class="no_active">
        <ul >
            <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>
           </div>

СSS выглядит так:

CSS

.no_active {
    display: none;
}
.active {
    display: block;
}

В скрипте пишу следующее

Javascript

 $('.icon_menu').click(
                                                        function(){
                                                   $('#nav').toggleClass(".active");
                                                });

Но не работает

Добавлено через 15 минут
Разобрался

Javascript

$(function() {
                                                        $(".icon_menu").click(function() {
                                                        $("#nav").removeClass("no_active");
                                                        $(this).toggleClass("active");
                                                        })
                                                        });

@StopSmell · 18.02.2015, 18:17

Не по теме:

Странно, в топике написано про резиновую верстку а все пишут про медиа-запросы, вьюпорты, и т.п. С каких пор резиновая верстка==адаптивная верстка?

@nikelodion · 18.02.2015, 18:58 **[ТС]**

Расскажите как сделать, чтоб этот блок появлялся плавно, появляется он в шапке сайта на всю ширину

@Lena-T-1981 · 18.02.2015, 20:05

Плавное проявление называется fadein.

@Taatshi · 20.02.2015, 15:46

nikelodion, одна тема - один вопрос.

@N1keo 1 / 1 / 0 Регистрация: 23.11.2013 Сообщений: 59
	18.02.2015, 05:15	2
	По читай про Bootstrap 3 и будет тебе вёрстка адаптивная. а всё что не так как надо выравнивается, корректируешь через media queries (о5 же почитай и видео на youtube посмотри). 0

@Taatshi Администратор 11995 / 5332 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	18.02.2015, 12:01	3
	Сообщение от nikelodion PS модераторы не сносите тему, из-за того что я только зарегестрировался и не отправил еще 5 сообщений. Спасибо С чего бы сносить?)) nikelodion, дайте ссылку на сайт. Скорее всего, Вы что-то неправильно делаете. 0

@nikelodion 0 / 0 / 0 Регистрация: 14.02.2015 Сообщений: 15
	18.02.2015, 12:13 [ТС]	4
	Он у меня на компьютере)) Я уже вроде как разобрался. Резина работает, но после 1170px при уменьшении окна начинают элементы друг на друга залазить. Я сделал с помощью media запросов. @media screen and (min-width:800px) and (max-width:1169px) - один дизайн, @media screen and (min-width:480px) and (max-width:799px) - другой дизайн, @media screen and (min-width:320px) and (max-width:479px) - для мобильных. Так правильно??? Кстати почему шрифты некоторые в опере и хроме отображаются в разных размерах? разница 0.1em 0

@nikelodion 0 / 0 / 0 Регистрация: 14.02.2015 Сообщений: 15
	18.02.2015, 13:24 [ТС]	6
	<meta name="viewport"......> у меня стояло. Шрифты указываю в em. Получается в em не указывать? а как в vw высчитывать? 0

@Goal Футболист 532 / 434 / 142 Регистрация: 31.10.2011 Сообщений: 1,010
	18.02.2015, 13:26	7
	Почитай, полезная ссылка http://css-tricks.com/viewport-sized-typography/ 1

@StopSmell
	18.02.2015, 18:17 #9
	Не по теме: Странно, в топике написано про резиновую верстку а все пишут про медиа-запросы, вьюпорты, и т.п. С каких пор резиновая верстка==адаптивная верстка? 0

@nikelodion 0 / 0 / 0 Регистрация: 14.02.2015 Сообщений: 15
	18.02.2015, 18:58 [ТС]	10
	Расскажите как сделать, чтоб этот блок появлялся плавно, появляется он в шапке сайта на всю ширину 0

@Lena-T-1981 5 / 5 / 0 Регистрация: 12.09.2014 Сообщений: 22
	18.02.2015, 20:05	11
	Плавное проявление называется fadein. 0

@Taatshi Администратор 11995 / 5332 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	20.02.2015, 15:46	12
	nikelodion, одна тема - один вопрос. 0