Как сделать scale для определённого размера экрана

@drkrol · Регистрация: 19.08.2013

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

Здравствуйте. Посмотрите пожалуйста на мои стили:

HTML5
1
2
3
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" /> <!-- Все стили и стили при размере экрана более 1340px  -->
<link rel="stylesheet" media="screen and (min-width: 690px) and (max-width: 999px)" href="{THEME}/style/adap-phone-tablet.css" />
<link rel="stylesheet" media="screen and (min-width: 1000px) and (max-width: 1309px)" href="{THEME}/style/adap-pc-tablet.css" />

Почитал я документацию по viewport, но так и не разобрался. Как сделать так, чтобы при размерах от 320px до 689px сайт просто зуммировал стиль adap-phone-tablet.css ? Я попытался в начале отдельно написать стиль для размеров 320 и 689, но ничего годного не вышло, поэтому лучше, чтобы на 320 пикселях сайт выглядел так же, как и на 690, только был зуммирован. Подскажите, как такое сделать?

@Resume · 09.07.2016, 18:48

Вы не подключили viewport.
Его нужно подключить:

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

@drkrol · 09.07.2016, 22:31 **[ТС]**

Resume, да нет, viewport, как раз таки подключён. и имеет такой же вид, как у вас, но это в любом случае работает не так, как я хочу. Первая картинка - 690px, вторая - 689px.

Как сделать scale для определённого размера экрана

@mrtoxas · 09.07.2016, 22:55

Быть может дадите ссылку на страницу?

Добавлено через 8 минут
И почему бы не адаптировать страницу под 689px и меньше? Неужели это сложнее, чем то, что вы пытаетесь придумать?

@drkrol · 10.07.2016, 02:31 **[ТС]**

mrtoxas, увы, но сайт на локальной.
адаптировать? как адаптировать сайт, когда колонки "наименование товара", "цена", "кол-во" и "стоимость" не помещаются в 320 пикселей?

@mrtoxas · 10.07.2016, 08:32

Например, так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.rwd-table {
  margin: 1em 0;
  min-width: 320px;
}
 
.rwd-table th {
  display: none;
}
 
.rwd-table td {
  display: block;
}
 
.rwd-table td:first-child {
  padding-top: .5em;
}
 
.rwd-table td:last-child {
  padding-bottom: .5em;
}
 
.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
  padding-right: 30px;
}
 
@media (min-width: 690px) {
  .rwd-table td:before {
    display: none;
  }
  .rwd-table th,
  .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child,
  .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child,
  .rwd-table td:last-child {
    padding-right: 0;
  }
  .rwd-table th,
  .rwd-table td {
    padding: 1em !important;
  }
}
 
.rwd-table th,
.rwd-table td {
  text-align: left;
}
 
.rwd-table {
  overflow: hidden;
}
 
.rwd-table th,
.rwd-table td {
  margin: .5em 1em;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table class="rwd-table">
  <tr>
    <th>Наименование</th>
    <th>Цена</th>
    <th>Количество</th>
    <th>Стоимость</th>
  </tr>
  <tr>
    <td data-th="Наименование">Очищающее мыло</td>
    <td data-th="Цена">44444</td>
    <td data-th="Количество">55555</td>
    <td data-th="Стоимость">66666</td>
  </tr>
</table>

Результат

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@drkrol 1 / 1 / 0 Регистрация: 19.08.2013 Сообщений: 163
	09.07.2016, 22:31 [ТС]
	Resume, да нет, viewport, как раз таки подключён. и имеет такой же вид, как у вас, но это в любом случае работает не так, как я хочу. Первая картинка - 690px, вторая - 689px. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	09.07.2016, 22:55
	Быть может дадите ссылку на страницу? Добавлено через 8 минут И почему бы не адаптировать страницу под 689px и меньше? Неужели это сложнее, чем то, что вы пытаетесь придумать? 0

@drkrol 1 / 1 / 0 Регистрация: 19.08.2013 Сообщений: 163
	10.07.2016, 02:31 [ТС]
	mrtoxas, увы, но сайт на локальной. адаптировать? как адаптировать сайт, когда колонки "наименование товара", "цена", "кол-во" и "стоимость" не помещаются в 320 пикселей? 0