Перейти к содержанию
MFX

Резиновый текст и смена шрифта при уменьшении

Рекомендуемые сообщения

Здравствуйте!

 

Чет полазил не нашел.

 

ocStore 2.х

 

Имеем блок с текстом, картинками и т.д.

<div style="width: 100%;><div style=" text-align:="" left;"=""><span style="font-family: gogoia;"><br></span></div>

Шрифт: gogoia(шрифт просто указал в коде font-family: gogoia; его же не надо устанавливать?)

Вроде все запаковал в width: 100%;

 

Картинки отображаются как надо, а текст при уменьшении превращается в ужас. Шрифт на мобилке огромный становится, неуклюжий, меняется с gogoia на стандартный

 

пытался делать это:

@media (max-width: 800px) {
    .minik{
		font-family: gogoia;
		font-size: 15px;
		width: 100%;
		}
}

Чет ничего не получается, все такое же некультурное!

 

Прозвучит глупо, но чет не получается, как завернуть текст так, чтобы при уменьшении до мобилки он был как бы резиновым и не менял шрифт!?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а другие типоразмеры в @media ?

по мимо @media (max-width: 800px

есть и 320 750 и т.д.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

прописывайте @media (min-width: 240px) and (max-width: 320px) {}

 

и будет на мобилке чудо ))

кстати, этот раздел в стиле есть, просто добавьте в него, что нужно

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

font-size: __%;

вот это называется резиновый

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

прописывайте @media (min-width: 240px) and (max-width: 320px) {}

 

и будет на мобилке чудо ))

кстати, этот раздел в стиле есть, просто добавьте в него, что нужно

 

Я тут немножко тупанул, но вот вопрос:

@media (min-width: 240px) and (max-width: 320px)) {
    .minik{
		font-family: gogoia;
		font-size: 15px;
		width: 100%;
		}
}

Если я пишу так, то мне надо класс, например .minik, отдельно от @media создавать!?)

 

 

И еще там был вопрос: Шрифт: gogoia(шрифт просто указал в коде font-family: gogoia;(он сам изменился автоматом где надо на него, но в мобилке его нет, как будто не воспринимает) его же не надо устанавливать отдельно или надо в опенкарт загрузить!??) Если надо, то случайно не подскажете куда и как грузить!?)

Изменено пользователем MFX

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты


html { font-size:100%; }
@media (max-width: 640px) { body {font-size:0.8rem;} }
@media (min-width: 640px) { body {font-size:0.8rem;} } 
@media (min-width:960px) { body {font-size:0.8rem;} }
@media (min-width:1100px) { body {font-size:0.8rem;} }

  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<div style=" text-align:="" left;"="">

странный синтаксис...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

html { font-size:100%; }
@media (max-width: 640px) { body {font-size:0.8rem;} }
@media (min-width: 640px) { body {font-size:0.8rem;} } 
@media (min-width:960px) { body {font-size:0.8rem;} }
@media (min-width:1100px) { body {font-size:0.8rem;} }

 

Паш, прости не понял, просто в css вставить!? Или куда!? Чет загнал в css, он похоже не так понял меня и ни прочел или я где-то туплю!

 

Кстати, это реально так или только у меня, или я чего не знаю, я короче писанул:

.marta {
    font-family: gogoia;
    position: absolute;
    font-size: 42px;
    right: 172px;
    top: 605px;
    color: #fff;
    font-weight: 800;
}

@font-face {
    font-family: 'gogoia';
    src: url(../font/gogoia.otf);
   }
h3 {
    font-family: 'gogoia';
}

@media (max-width: 800px) {
    .myphone{display:none;}
}

@media (min-width: 240px) and (max-width: 320px)) {
    .minik{
		font-family: gogoia;
		font-size: 15px;
		width: 100%;
		}
}

.nick {
    font-family: gogoia;
    position: absolute;
    font-size: 42px;
    right: 875px;
    top: 605px;
    color: #fff;
    font-weight: 800;
}

Но при закреплении class="nick" к объекту, его тупо не видели, то есть я прописываю стиль, а код говорит, что не видит стиль, возможно ли что эта причина в том, что стиль nick расположен ниже @media в стилях... Просто он никак не хотел вставать, пока я не перенес его выше над @media, после чего он нормально встал. Интересно в этом проблема была!?(так, чисто для себя)..

 

На всякий случай для тех, кто вдруг не вкурсе как грузить язык, для OC сайта(или в него, кому как больше нравится)(так как мне никто не ответил, решил сам написать(на всякий случай):

 

вставьте это в stylesheet.css:

@font-face {
    font-family: 'gogoia'; /* Имя шрифта */
    src: url(../font/gogoia.otf); /* Путь к файлу со шрифтом (не нужны разные сайты для шрифтов, заливайте шрифт с компа на ftp и все) */
   }
h3 {
    font-family: 'gogoia';
}

И шрифт будет подгружаться непосредственно с вашего сервера на устройство. Красивый стиль шрифта сайта не только на вашем компе, но и на компах окружающих.)

 

 

 

 

<div style=" text-align:="" left;"="">

странный синтаксис...

 

Это побочный эффект от "HTML содержимое", он почему-то местами код искажает!

Изменено пользователем MFX

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

html { font-size:100%; }
@media (max-width: 640px) { body {font-size:0.8rem;} }
@media (min-width: 640px) { body {font-size:0.8rem;} } 
@media (min-width:960px) { body {font-size:0.8rem;} }
@media (min-width:1100px) { body {font-size:0.8rem;} }

 

объясняю проще

данный код вставляем в css, далее все шрифты, где не указан конкретный размер на сайте имеет 

font-size:0.8rem;

естественно, и желательно, где нужен иной размер шрифта  прописываем его так же в *rem

размеры в коде  даны  "от балды" (font-size:0.8rem;), то есть для каждого разрешения указываем свои, подходящие под дизайн размеры

данный код определяет общие размеры для всех шрифтов- если им не указан свой!

на данный момент шрифты в rem , являются адаптивными и часто стали применяться для адаптивных сайтов (сам так же чаще стал пользоваться данной фичей)

ну и почитай, думаю статья будет полезной и многое прояснит

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

объясняю проще

данный код вставляем в css, далее все шрифты, где не указан конкретный размер на сайте имеет 

font-size:0.8rem;

естественно, и желательно, где нужен иной размер шрифта  прописываем его так же в *rem

размеры в коде  даны  "от балды" (font-size:0.8rem;), то есть для каждого разрешения указываем свои, подходящие под дизайн размеры

данный код определяет общие размеры для всех шрифтов- если им не указан свой!

на данный момент шрифты в rem , являются адаптивными и часто стали применяться для адаптивных сайтов (сам так же чаще стал пользоваться данной фичей)

ну и почитай, думаю статья будет полезной и многое прояснит

 

Спасибо большое, разобрался!) И за статью спасибо, интересная и полезная!)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

сегодня нашел еще одну, примечательную статью по данному вопросу

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

сегодня нашел еще одну, примечательную статью по данному вопросу

Вот это я сейчас прочел, вот это прям... Я оказывается вообще мало что знаю по верстке текста... vw, vh, vmin и vmax - это вообще ново для меня!)

calc - я вообще не ожидал... Статья интересная... Я почему-то всегда думал и использовал только px, % и rem...)

Спасибо за статью!)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.