Отзывчивый CSS относительно стандартного CSS

Question

Я не уверен, что это вполне возможно. Хотите проверить здесь.

В основном, я пытаюсь использовать размер шрифта по умолчанию (скажем, 40 пикселей). при загрузке медиа-запроса я хочу изменить его, чтобы уменьшить до 80% размера шрифта по умолчанию. Это возможно?

.text p span{ 
     font-size:40px; 
} 
@media screen and (max-width: 640px){ 
    .text p span{ 
     font-size: <0.8*40px>; 
    } 
} 
@media screen and (min-width: 641px) and (max-width: 1024px){ 
    .text p span{ 
     font-size: <0.6*40px>; 
    } 
} 

Причина я не устанавливать значения точек, потому что .text p span получает различные имена классов, которые будут иметь различные размеры шрифта. Но они должны уменьшаться в том же соотношении. Я пытаюсь, что это невозможно?

Answer 1

Вы можете использовать em, как это, где вы установили по умолчанию на теле, или на любой родитель, вы хотите, чтобы наследовать размер шрифта от и настроить оттуда

Также rem и % это возможные альтернативы, все сводится к структуре разметки и т.д.

em относительно его прямого или ближайшего родителя, rem является относительно HTML (корень) - их размера шрифта.

body { 
 
    font-size: 20px; 
 
} 
 
.text p span { 
 
    font-size: 2em; 
 
} 
 
@media screen and (max-width: 640px) { 
 
    .text p span { 
 
    font-size: 1.6em; 
 
    } 
 
} 
 
@media screen and (min-width: 641px) and (max-width: 1024px) { 
 
    .text p span { 
 
    font-size: 1.2em; 
 
    } 
 
}

<div class="text"> 
 
    <p> 
 
    <span> 
 
     Hey there ... 
 
     </span> 
 
    </p> 
 
</div>

С rem можно сделать, как этот

html { 
 
    font-size: 40px; 
 
} 
 

 
.sampleClass { 
 
    font-size: 20px; 
 
} 
 

 
@media screen and (min-width: 641px) and (max-width: 1024px){ 
 
    .sampleClass span { 
 
\t font-size: 0.8rem; 
 
    } 
 
} 
 
@media screen and (max-width: 640px){ 
 
    .sampleClass span{ 
 
\t font-size: 0.6rem; 
 
    } 
 
}

<p class="sampleClass"> 
 
    This is 20px 
 
    <span>This is relative to the html element when @media kicks in</span> 
 
</p>

Answer 2

Я не самый большой поклонник СЭМ, но если вы хотите, чтобы уменьшить до 80% используют .8em как ваше сильное переопределение .text ps размер панорамирования, который вы установили.

@media screen and (max-width: 640px){ 
    .text p span{ 
     font-size: .8em; 
    } 
} 

Answer 3

Возможно, стоит посмотреть на Sass/Scss для задания переменных и применения операторов к ним. Вы можете установить переменные в начале таблицы стилей, и при компиляции .sass или .scss файл, он выводит правильный номер в файле .css

http://sass-lang.com/guide#topic-8

Answer 4

Вполне возможно, и, как вы, вероятно, можно сказать, существует ряд способов достижения этого. Техника, которую я использую очень прост:

1. Установите font-size на body и html элементов в px, а также любой медиа-запрос к шагу размер шрифта вверх или вниз, в px.

2. Используйте rem единиц, чтобы установить размер шрифта там, где вам нужно. rem обозначает root em, где root является самым верхним элементом в DOM, обычно html или body.

Пример:

html, body { 
    font-size: 18px; 
} 

@media screen and (max-width: 320px) { 
    html, body { 
    font-size: 15px; 
    } 
} 

/* 
The rem values use 18px or 15px as the base unit 
depending on matching query. 

In this case there is no need to use 1rem unless you need to reset 
a previously changed value. 
*/ 
.heading { font-size: 1.2rem; } 
.small { font-size: 0.8rem; } 

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

em, с другой стороны, очень полезно, если требуется, чтобы значение было подвержено влиянию font-size ближайшего родительского элемента.

Например, если вы хотите иметь отступы, масштабируемую пропорционально к текстовому размеру .heading, то вы будете использовать em:

html, body { 
    font-size: 18px; 
} 

@media screen and (max-width: 320px) { 
    html, body { 
    font-size: 15px; 
    } 
} 

.heading { font-size: 1.2rem; } 
.small { font-size: 0.8rem; } 

/* 
Now you define a padding that is always 80% of the element's 
font-size. 
And since .heading is set at 1.2rem, the padding will be 
80% of 1.2rem. 
*/ 
.heading { padding: 0.8em; }