Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Подгон под размеры экрана.

Проблема такова: есть сайт . Нужно, чтобы все его элементы подгонялись под размеры экранов с другим разрешением.
Ответ:
Сообщение от SadRat
Проблема такова: есть сайт . Нужно, чтобы все его элементы подгонялись под размеры экранов с другим разрешением.
Вы хотите, чтобы это сделали за Вас?
Вопрос: Как убрать фон при определенном размере экрана

Добрый. Есть в разделе бэкграунд. Но если монитор квадратный он его обрезает и получается фон не полный. Вопрос как сделать что бы при определенном размере экрана в частности по ширине бэкграунд был белым?
сейчас css такой
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
body.bx-background-image{
    position: relative;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #fff;
    background-image: url("images/bg.jpg?4321");
}
@media (min-width: 992px) and (max-width:1199px){
    body.bx-background-image{
        -webkit-background-size:1600px auto;
        background-size:1600px auto;
    }
}
@media (min-width: 768px) and (max-width: 991px){
    body.bx-background-image{
        -webkit-background-size:1280px auto;
        background-size:1280px auto;
    }
}
@media (max-width: 767px){
    body.bx-background-image{
        background: none ;
    }
}
Ответ:
Сообщение от Omion
Ты выключаешь фон, нужно заменить. Совет: Научись правильно задавать вопросы. В твоём случае: как заменить фон при определённом размере экрана, тогда вопрос станет ответом
Верно так и надо
Вопрос: определить размер экрана

Все привет!
Есть сайт
(открывать через VPN, если не открывается,

пытаюсь понять реализации меню+поиска, нашел у них в js код
определения устройства
function myDevice(e) {
    prev_device = device, device = e <= 767 ? "smartphone" : e > 767 && e < 992 ? "tablet" : "pc"
}

но не могу понять, где именно происходит определение ширины.
Помогите найти нужный код для дальнейшего испольвания

$(".search-cont input").focus(function () {
    "smartphone" == device && ($(".mobile-search-and-menu-close").addClass("show"), $(".mobile-menu-open").addClass("hide"), $(".menu-cont").hide(), $("body", "html").addClass("block-overflow"), $(".header-page").hide(), $(".page").hide(), $(".buyon-bar").hide()), "tablet" == device && $(".menu-cont").hide()
}),

сейчас получаю, device is not defined
Имею firebug есть, но не знаю, где можно выловить нужный код.

Помогите разобрать пожалуйста.
Ответ:
Сообщение от GostWalk
определения устройства
function myDevice(e) {
    prev_device = device, device = e <= 767 ? "smartphone" : e > 767 && e < 992 ? "tablet" : "pc"
}

но не могу понять, где именно происходит определение ширины.
Функция не определяет устройство, а определяет ширину окна браузера.

Сама функция только прогоняет по условию, в ней не происходить определение ширины экрана устройства.
Функция принимает параметр e, это и есть ширина монитора, её передают в эту функцию при вызове.

Определить ширину экрана очень просто:
window.innerWidth - вся ширина окна
document.documentElement.clientWidth - ширина минус прокрутка

Вот теория -
Вопрос: Определить размеры ячейки таблицы.

Есть таблица:
<body onload=getCellSize();>
<table>
  <tr>
     <td>&nbsp;</td>
     <td id="mycell">&nbsp;</td>
  <tr>
</table>
<body>
function getCellSize()
{
  alert(document.getElementById("mycell").width);
  alert(document.getElementById("mycell").heigth);
}

Alert'Ы ничего не возвращают !!!
Как определить размер ячейки?
(style.width тоже ничего не возвращает)
Ответ: здесь хорошо рассказано о получении размеров элементов
Вопрос: Изменить размер блока в зависимости от размера экрана

Нужно сделать так, чтобы если размер экрана меньше 768 пикселей, то ширина всех элементов с классом slider_li вычислялась по формуле winBr/2 - 30px;
Пытался сделать так, как ниже, но не работает. Не могу понять почему. Помогите пожалуйста!

Код Javascript
1
2
3
4
5
$(window).resize(function(){
var winBr = $(window).width();
if(winBr<768){
document.getElementsByClassName('.slider_li').style.width = winBr/2 - 30;
}
Ответ: fol, У меня почему-то предыдущее значение из css используется, из-за чего это может быть?

Добавлено через 7 минут
Ага, понял в чем ошибся!
А какая функция используется, если действие должно осуществляться всегда если экран меньше 768, а не только при изменении? Там в начале стоит проверка resize, как сделать без нее?

Добавлено через 13 минут
(document).ready(function()
Тоже нашел!)
Спасибо, вопрос снят!
Вопрос: При уменьшении размера экрана, таблица теряется за меню (bootstrap)

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

HTML5
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
<body>
 
    <nav class = "navbar navbar-inverse navbar-fixed-top">
            
        <div class = "container-fluid">
                <div class = "navbar-header">
                 <a href="#" class = "navbar-brand">Архив предприятия</a>
                </div>
                
               <div>
                <ul class = "nav navbar-nav">
                    <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>
        </div>
        
    </nav>
    
    <div class = "container-fluid">
    <div class="table-responsive">
    <table class="table table-bordered table-hover" style="width: 50%; ">
        <thead>
        <tr class="active">
            <th>dfd</th>
            <th>dfd</th>
            <th>dfd</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>dfddd</td>
            <td>dfd4</td>
            <td>dfd5</td>
        </tr>
        <tr>
            <td>dfddd</td>
            <td>dfd4</td>
            <td>dfd5</td>
        </tr>
        <tr>
            <td>dfddd</td>
            <td>dfd4</td>
            <td>dfd5</td>
        </tr>
        <tr>
            <td>dfddd</td>
            <td>dfd4</td>
            <td>dfd5</td>
        </tr>
        </tbody>
    </table>
    </div>
    </div>
    
    </body>
Ответ: mmmqqp, мне кажется это бесмысленно. Если они будут видеть, тогда при прокрутке будет все съезжать, отталкиваясь от меню и не получится увидеть то что ниже.
Чтоб меню не занимало пол экрана, оно должно сворачиваться [del]
Можно добавить padding/margin, когда в мобильную версию переходит

CSS
1
2
3
4
5
@media screen and (min-width: 768px) {
   .tablica {
      margin-top: 50px
   }
}

mmmqqp, и это не проблема, а нормальное поведение)
Вопрос: В учебных целях поставить черточки на картинке по размеру экрана

Начал изучать верстку. HTML, CSS.

Не могу разобраться вообще, как картинки отображаются.

Создал картинку в редакторе. Ее размер 2000 х 2432.

На ноутбуке у меня разрешение 1400 Х 1050.
Еще у меня Samsung Galaxy S5. У него экран 1080 x 1920.

Вот я и хочу поставить 2 черточки по длине и две черточки по ширине. Так, чтобы они пришлись точно на срез картинки справа и снизу экрана. И не знаю, как это сделать.

На ноутбуке у меня, во-первых, слева панель задач. Затем поле у картинки. А справа полоса прокрутки. И как мне в таких условиях вычислить реальную видимую область?

Затем возьмем мобильный телефон. Сверху часть экрана занимает служебная панель (где заряд батареи, будильник, время и т.п.), затем идет адресная строка. Затем поле картинки. Тоже не могу понять, как тут быть.

Кроме того, меня смущает еще вот такая вещь. На ноутбуке я примерно смог прикинуть - ну, да, картинка, например, по вертикали проматывается до низу еще на полтора экрана. Т.е. один экран вместился полностью, затем вниз гоним еще один полный экран и еще половинку примерно. Это соответствует моим представлениям о соотношении размера картинки и размера экрана.

На мобильном телефоне, например, возьмем размер по горизонтали. Экран в два раза меньше картинки. А на практике направо надо картинку листать очень долго до отбойника. Мултипликатор какой-то, значит, есть.

В общем, не могу ничего понять. Как это все изучать? Может быть, моя идея с черточкой вообще не жизнеспособна.
Ответ: Да, вы правы.
Вопрос: Адаптивная верстка. Размеры экранов устройств

Доброго времени суток всем. Возможно вопрос глупый, но ответа на него я не нашел пока.
При адаптивной верстки мы указываем в медиазапросе миниальную/максимальную ширину в пикселях.
Так вот. На устройстве с одинаковыми размерами экрана, может быть абсолютно разное разрешение.
Например. На моем Doogee DG580 разрешение qHD 540X960. В то время как на iPhone 6s Plus 1080X1920. При одинаковой диагонали экрана в 5.5". Соответсвенно размер страницы должен быть одинаковым для обоих устройств.
Кстати в среде разработчика в Chrome при включенном режиме toggle device mode разрешение для iPhone 6 Plus
указано как 414 Х 736. И я напрочь не понимаю в чем эта разница и какую ширину для каких устройств указывать в медиазапросах.
Ответ: Все, я понял! Благодарю.
А то я думал, что данная строчка как раз и указывает 1080. Так как в книги Итона Маркота приводился пример с iPhone, где разрешение маленькое. И тем самым все было понятно и логично.
Спасибо большое!
Вопрос: Масштабирование сайта пропорционально окну (размеру экрана)

Добрый день. Подскажите, пожалуйста, как сделать чтоб при изменении окна браузера (или статически на разных разрешениях экрана) сайт просто изменял свой масштаб относительно размера экрана. Т.е. на маленьком экране - сайт будет отображаться 1:1 как и на большом. Сделан на div'ах и верстать все через таблицу не вариант.
Перерыл поисковики и подходящих решений не нашел. Может не в тот раздел, но думаю, может существует решение на javascript. Спасибо.
Ответ: ты уверен что хочешь решать это именно средствами javascript? этими вещами занимаются верстальщиками, раньше это был резиновый дизайн, теперь эти техники относят к созданию адаптивных сайтов, есть готовые фреймворки для этого. для этой задачи вроде используются media-query в css
Вопрос: Как сделать scale для определённого размера экрана

Здравствуйте. Посмотрите пожалуйста на мои стили:
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, только был зуммирован. Подскажите, как такое сделать?
Ответ: Например, так:
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>