Форум Сайтостроение Веб-строительство

адаптивный дизайн

M
На сайте с 01.10.2014
Offline
61
mortido
546

Всем привет. Как выставлять разные свойства css для вертикального и горизонтального положения телефона? Разрешения меняются значительно и бэкграунд при одном css для 2ух положений не вписывается.

Лучшая вап клик пп для выкупа подписок (https://mcwap.ru/?r=1153)
S
На сайте с 30.09.2016
Offline
469
Sitealert
#1
mortido:
бэкграунд при одном css для 2ух положений не вписывается.

А чем отличаются css для 2вух и для 1ного?

Прописываете правила для каждого случая.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
M
На сайте с 01.10.2014
Offline
61
mortido
#2
Sitealert:
А чем отличаются css для 2вух и для 1ного?
Прописываете правила для каждого случая.

вот так выглядит css 

@media screen and (max-width: 1040px) {

    html {

        background: red !important;

    }

}

  html {

        background: black;

    }

Какое бы я разрешение не выставлял где max-width: все равно и в горизонтальном и в вертикальном положении бэкграунд красный

A9
На сайте с 16.03.2013
Offline
46
al982
#3

Может нужно @media screen and (min-width: 1040px) ?

VoV@
На сайте с 22.09.2007
Offline
196
VoV@
#4

@media all and (orientation: portrait) {

/* стили для портрета */

}

@media all and (orientation:landscape) {

/* стили для пейзажа */

}

или, если стили совсем разные:

<link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css">

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

⭐ Разработка Андроид-приложений (Xamarin C#). ⭐ Разработка ASP.NET (WebForms, MVC, WebAPI, Core). ⭐ Цой жив!
S
На сайте с 30.09.2016
Offline
469
Sitealert
#5
mortido:
Какое бы я разрешение не выставлял где max-width: все равно и в горизонтальном и в вертикальном положении бэкграунд красный

И даже для разрешения 200px? Не может быть.

D.iK.iJ
На сайте с 26.05.2013
Offline
225
D.iK.iJ
#6

Для начала, адаптивные стили обычно должны быть ниже остальных в коде.

Ну и почему background у html? Почему не у body?

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий