Treniki

Посмотрите этот топик Какой есть способ организовать метки или тэги для файлов под windows?

Либо макет не был "резиновым" и растяжение на всю ширину любого монитора не подразумевалось.
Либо это задача дизайнера предоставить изображения нужного размера и соответствующего качества.
И не забывайте про ретину.

1) Когда получаешь такой макет, спрашиваешь дизайнера:
как ведет себя картинка на разрешениях бОльших 1440?
-Обрезается по краям?
-Обрезается по краям, при этом плавно градиентом уходит к фоновому цвету?
-Растягивается на всю ширину с сохранением высоты? (cover)
-Растягивается на всю ширину с сохранением пропорций картинки?
2) Верстаешь на основании ответов
3) Если ответов нет, или диз в шоке, и прочее, сделайте-как-нибудь, то делаешь так, как считаешь нужным. Т.е. сам принимаешь решение. Сам :)

1) Нет, не является.
2) 3) Это хаки для старых браузеров, не поддерживающих новые форматы woff.

Посмотрите недавний ролик от HTML академии на эту тему, много проясните.

Без разницы как: хочешь - два дива плюс transform: skew, хочешь - два дива плюс border. Всеравно дальше позиционирование и z-index.
Для любителей поизвращаться можно и svg в бекгаунд впихнуть, но браузеры на них память кушают хорошо.

Сразу пришло в голову 3 Варианта.

1. Сделать картинками. То есть тупо нарезать изображения и поставить их как фоновые.
2. Сделать треугольники на css (не уверен что можно сделать их адаптивными).
3. Старым добрым SVG, тут и адаптивность и гибкость, всё как положено.

ДЕМО: https://jsfiddle.net/RadCor/ob74ucge/

if (deg >= 360-45/2 || deg <= 45/2) {
  direction = "north";
}

Дубль два: getCurrentPosition() и getJSON() — асинхронные методы.
$('.section').html(html); выполняется до того, как получен ответ от сервера. Этот ответ, соответственно, просто игнорируется. Как решить проблему я вам написал в прошлом вопросе.

Метод navigator.geolocation.getCurrentPosition() является асинхронным. Это значит, что в момент заполнения html значения ещё могут быть не получены. Должно быть так:

$(document).ready(function() {
  setLocation();  
});

function setLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      $('.section').html('<p>Latitude: ' + position.coords.latitude; + '</p><br><p>Longitude: ' + position.coords.longitude + '</p>');
    });
  };
}

Это потому, что getCurrentPosition — асинхронная операция, вы устанавливаете значения переменных в коллбеке.
И на тот момент, когда вы засовываете их в .section, они ещё не установлены.

Можно поменять код вот так, чтобы заработало.

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

Тут может не хватать

• дизайна календаря
  
• состояний кнопок (неактивных)
  

Но в целом всего достаточно.
Реализация может быть как на стороне бекенда (за каждым изменением списка товаров бек перестраивает страницу), так и частично на фронте (валидация, ajax для быстрого обновления части контента).
Я бы делал второй вариант:
- все данные получаем по Ajax и отправляем так же.
- валидация на клиенте (Parsley.js / HTML5 Forms) + дополнительная валидация проверенных данных беком

Вас это волновать не должно. Верстайте по макету, остальным будут заниматься программисты.

Вам это нужно - alvarotrigo.com/fullPage

создаешь сниппет

<snippet>
    <content><![CDATA[(${0:$TM_SELECTED_TEXT}/2)]]></content>
    <tabTrigger>dd</tabTrigger>
    <scope>source.js</scope> //тут указываешь виды файлов где будет работать сниппет. можно через запятую
    <description>dd</description>
</snippet>

сохраняешь сниппет в папке саблайма. примерно сюда "C:\Users\*username*\AppData\Roaming\Sublime Text 3\Packages\User\dd.sublime-snippet"

дальше идешь в Preferences -> Key Bindings и забиваешь клавишу.

{
		"keys": ["ctrl+shift+1"], 
		"command": "insert_snippet",
		"args": {"name": "Packages/User/dd.sublime-snippet"}
	}

собственно все. при выделении любого текста и нажатии ctrl+shift+1 саблайм обернет его в ( *тут текст* /2)

Я так верстаю. Всё в процентах, от шрифта до отступов.
По поводу высоты: как правило такой момент только с картинками, ими и балансирую, иногда вплоть до того, что готовлю пропорциональную прозрачную болванку, которая «держит» мне блок.
Первый сайт был так сверстан лет 5 назад. Пример: www.dovidka.org Это один из моих личных сайтов, на нём и отрывался, когда пришла идея так сверстать.

Потом практика показала, что такая заморочка отлично прокачивает терпение (нужно же замерять и переводить в проценты каждый параметр), но не всегда оправдана.
Иногда лучше (именно лучше, а не проще) задать фикс (или ступеньку фиксов через media-query), который отлично смотрится и на большом экране и на мобильном.

В общем, нужно перед вёрсткой за-Дзениться в макет, определить всё, что не потребует резины и тогда уже анализировать остальное. То есть во главе to-do разработка каркаса, но это как нулевой пункт списка, чтобы сэкономить усилия. Редко когда сайт как сделали так он года в таком виде и живёт. Если он (спасибо, что...) живой, на нём постоянно что-то пилится и нужно заранее подумать о том, как это всё поддерживать: первый макет (в виде чистого PSD) как-правило тает в летах, дизайн-доработки — это скриншоты, в которых перерисована только какая-то область и через год никто уже и не вспомнит, а какая была исходная ширина и относительно чего считать проценты?

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

Но допустим, что задача у вас стоит именно так как вы обозначили - сайт всегда масштабируется к размеру экрана (пусть к ширине, это чаще бывает). Тогда вам следует все величины, задающие расположение и размеры блоков на странице, рассчитывать и указывать в процентах (%), либо вьюпортах (vw). Отдельно нужно будет проработать типографику. Здесь тоже только ремы (rem) и емы (em). Так будет проще сделать несколько контрольных точек для изменения шрифтов. Также можно обратить внимание на метод отзывчивого размера шрифта с использованием calc и rem.

Еще один обязательный пункт - максимальное использование векторных изображений, логотип и иконки, как минимум (хотя этот пункт для любой верстки уместен).

<html>
<head>
 <style>
   @media (min-width: 768px) and (max-width: 3992px) {
     
  .test{
    width: 100%;
    background-image: url(http://hdlatestwallpapers.com/wp-content/uploads/2016/10/Colored-Smoke-Backgrounds.jpg);
    height: 600px;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
  }
   .test1{
    width: 300px;
    height: 300px;
    background-color: #ff0000;
    margin: 0 auto;
    position: relative;
    top: 150px;
   }

   }
</style>
 

</head>
  <body>
   <div class="test">
    <div class="test1">
    </div>
  </div>

  </body>
</html>

До 1439px показывайте версию дизайна на 1024px
Это конечно не панацея, но избавит от лишней боли.

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

Ну я не шибко опытный. Может есть какое-нибудь крутое решение.