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

[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%;
		}
}

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

 

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

[HyperLabTeam]

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

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

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

[anboza]

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

 

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

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

[Otvet]

font-size: __%;

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

[MFX]

прописывайте @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;(он сам изменился автоматом где надо на него, но в мобилке его нет, как будто не воспринимает) его же не надо устанавливать отдельно или надо в опенкарт загрузить!??) Если надо, то случайно не подскажете куда и как грузить!?)

Змінено 20 листопада 2016 користувачем MFX

[Skunk]

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

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

[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 вставить!? Или куда!? Чет загнал в 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 содержимое", он почему-то местами код искажает!

Змінено 22 листопада 2016 користувачем MFX

[MFX]

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

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

font-size:0.8rem;

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

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

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

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

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

 

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

[MFX]

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

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

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

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