Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Шаблоны (TPL) » Разные размеры текста в разном масштабе?

Разные размеры текста в разном масштабе?


     19.08.2016    Шаблоны (TPL), Стили (CSS)    693

вопрос
Привет всем, прошу помочь.
Имеется шаблон Резиновый, там одна ошибка, в меню текст в 100% виде сайта нормально смотрится, но при заходе через мобилку на сайт, там размер текста смотрится некорректно, т.е. такой как и в ПК версии

Как сделать чтобы при заходу через мобилку текст немножко уменьшался..?

Заранее благодарю

P.S. только бесплатно...

Ответа пока нет


4 комментария

Ойбек
Юзер

Ойбек - 19 августа 2016 12:50 -

Вот сам CSS отвечающий для данного текста
.nav li a
{
float: center;
font-family:Arial, Helvetica, sans-serif;  
font-size: 20px;
color:#fff;
text-shadow:0px 1px 1px #909090;
line-height:30px;
padding:18px 12px 0 8px;
display: block;
text-decoration:none;
border-radius:25px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}

irrwisch
Юзер

irrwisch - 19 августа 2016 13:23 -


@media screen  and (max-width: 979px)  { /* Для планшетов */
    .nav li a {
        float: center;
        font-family:Arial, Helvetica, sans-serif;  
        font-size: 20px; /* Нужный размер шрифта */
        color:#fff;
        text-shadow:0px 1px 1px #909090;
        line-height:30px; /*Подходящая высота строки*/
        padding:18px 12px 0 8px; /* Нужные отступы */
        display: block;
        text-decoration:none;
        border-radius:25px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
    }
}
@media screen and (max-width: 500px)  { /* Для мобильных*/
    .nav li a {
        float: center;
        font-family:Arial, Helvetica, sans-serif;  
        font-size: 20px; /* Нужный размер шрифта */
        color:#fff;
        text-shadow:0px 1px 1px #909090;
        line-height:30px; /*Подходящая высота строки*/
        padding:18px 12px 0 8px; /* Нужные отступы */
        display: block;
        text-decoration:none;
        border-radius:25px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
    }
}

Ойбек
Юзер

Ойбек - 19 августа 2016 13:34 -

Огромное спасибо! благодарю вас!!!

irrwisch
Юзер

irrwisch - 19 августа 2016 13:51 -

Хотя посмотрел сейчас актуальную документацию и для мобильных лучше использовать

@media only screen and (max-width: 640px) {...}

а для планшетов

@media only screen and (min-width: 641px) and (max-width: 1024px) {...}

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх