Есть несколько вариантов решений, в зависимости от того, что требуется сделать, и свободного времени на это.
62 |
63 |
64 | - Вариант с фиксированной колонкой
65 | -
66 |
На макете, как правило, предусмотрены поля. Можно измерить ширину контента без учёта этих полей и использовать это значение, задав колонке выравнивание по центру.
67 |
68 |
69 | -
70 |
Плохо
71 | {% highlight css %}@media (min-width: 600px) {
72 | .container {
73 | width: 600px;
74 | }
75 | }{% endhighlight %}
76 |
77 | -
78 |
Хорошо
79 | {% highlight css %}@media (min-width: 600px) {
80 | .container {
81 | width: 500px;
82 | margin: 0 auto;
83 | }
84 | }{% endhighlight %}
85 |
86 |
87 |
88 | Так контейнер, который мог бы растопырить страницу, оказывается уже, чем доступное пространство, и горизонтальной прокрутки не будет.
89 |
90 | Простое и быстрое решение.
91 |
92 | Если всё же нужно ограничить ширину колонки вместе с полями внутри, вместо width используйте max-width:
93 |
94 |
95 | -
96 |
Плохо
97 | {% highlight css %}@media (min-width: 600px) {
98 | .container {
99 | width: 600px;
100 | }
101 | }{% endhighlight %}
102 |
103 | -
104 |
Хорошо
105 | {% highlight css %}@media (min-width: 600px) {
106 | .container {
107 | max-width: 600px;
108 | }
109 | }{% endhighlight %}
110 |
111 |
112 |
113 | Так колонка не растянется шире заданного значения, а если места окажется недостаточно — сожмётся.
114 |
115 |
116 | - Вариант с резиновой колонкой
117 | -
118 |
Чтобы на узких экранах конент не болтался узкой полосой, а занимал всю доступную ширину, можно сделать иначе: никак не ограничивать ширину контейнера (и он растянется на всю ширину body), но задать боковые margin или padding.
119 |
120 |
121 | -
122 |
Плохо
123 | {% highlight css %}@media (min-width: 600px) {
124 | .container {
125 | width: 600px;
126 | }
127 | }{% endhighlight %}
128 |
129 | -
130 |
Хорошо
131 | {% highlight css %}@media (min-width: 600px) {
132 | .container {
133 | padding: 50px;
134 | }
135 | }{% endhighlight %}
136 |
137 |
138 |
139 | Контейнер без фиксированной ширины сам подгонится под доступное пространство не вызывая горизонтальную прокрутку, и будет тянуться вместе с окном браузера.
140 |
141 | Не забудьте ограничить ширину колонки на десктопе, чтобы страницу не ратстягивало на всё окно, если у пользователя широкий экран.
142 |
143 | Минус способа в том, что в этом случае также надо будет предусмотреть резиновое поведение содержимого, чтобы оно не сбивалось в кучу или не размазывалось по странице. Если на это нет времени, просто используйте способ с фиксированной колонкой.
144 |
145 |
146 | - Вариант с фоном на всю ширину страницы
147 | -
148 |
149 |
Например, в макете требуется что-то такое:
150 |
151 | 
152 |
153 | У шапки фон по ширине страницы, содержимое по центру.
154 |
155 | На самом деле, вариант почти ничем не отличается от предыдущих. В случае с резиновой колонкой и паддингами, можно задать фон самой колонке, потому что она и так растянута на ширину страницы. В остальных случаях снаружи контейнера нужно просто задать обёртку, которой и будет задан фон.
156 |
157 | Обёртка с фоном не будет ограничиваться по ширине и всегда будет растягиваться по ширине body не вызывая появление прокрутки. При этом содержимое внутри неё будет придерживаться заданной ширины в зависимости от выбранного способа.
158 |
159 |
160 |
161 | - Вариант с картинкой на всю ширину страницы
162 | -
163 |
164 |
Иногда нужно, чтобы тянулась не вся колонка, а часть содержимого, например, картинка в статье:
165 |
166 | 
167 |
168 | В этом случае ширина колонки с текстом делается с помощью какого-то из предыдущих способов, но для картинки потребуется дополнительный код.
169 |
170 | Если нужно, чтобы картинка растягивалась и сжималась вместе с контентом, достаточно будет кода для картинки:
171 |
172 | {% highlight css %}.img--panorama {
173 | position: relative;
174 | /* растягиваем по ширине окна */
175 | width: 100vw;
176 | /* центрируем */
177 | left: 50%;
178 | transform: translate(-50%);
179 | }{% endhighlight %}
180 |
181 |
182 | Но если требуется, чтобы размеры картинки не менялись, а всё, что не поместилось по ширине, просто обрезалось, тогда картинке нужна обёртка:
183 |
184 | {% highlight html %}
185 |
186 |
Теперь центрируется обёртка, и она же отвечает за выравнивание картинки по центру:
189 |
190 | {% highlight css %}.panorama {
191 | position: relative;
192 | /* растягиваем по ширине окна */
193 | width: 100vw;
194 | /* скрываем всё, что не поместилось в экран */
195 | overflow: hidden;
196 | /* центрируем обёртку */
197 | left: 50%;
198 | transform: translate(-50%);
199 | /* центрируем картинки */
200 | display: flex;
201 | justify-content: center;
202 | }
203 | .panorama__img {
204 | /* фиксируем ширину картинки */
205 | width: 982px;
206 | /* отключаем max-width,
207 | если он было задано выше */
208 | max-width: none;
209 | }{% endhighlight %}
210 |
211 | На мобильных всё будет работать как задумано, но если открыть на десктопе, обнаружится горизонтальная прокрутка:
212 |
213 | 
214 |
215 | Почему?
216 |
217 | Потому что 100vw — это не ширина body, а вся ширина окна вместе с прокруткой, то есть элемент такой ширины на странице не поместится, что и вызовет появление горизонтальной прокрутки.
218 |
219 | Чтобы решить эту проблему, ближайшему родителю широкой картинки, растянутому на всю ширину страницы, задайте overflow: hidden.
220 |
221 | 
222 |
223 | Горизонтальная прокрутка пропала, всё работает как надо.
224 |
225 |
226 |
227 | 
26 |
27 | 
30 |
31 | 
99 | 
106 |
107 | 
112 |
113 | 
125 |
126 | 
131 |
132 | 
146 |
147 | 
152 | 
41 |
42 | 
69 |
70 | 
129 |
130 | 
175 |
176 | 
181 |
182 | 
43 |
44 | 
47 |
48 | 
51 |
52 |