Responsive CSS relativ zu Standard-CSS

Question

Ich bin mir nicht sicher, ob das überhaupt möglich ist. Willst du hier nachsehen?

Grundsätzlich, was ich hier versuche, ist eine Standardschriftgröße (sagen 40px). Wenn eine Medienabfrage beginnt, möchte ich sie ändern, um sie auf 80% der Standardschriftgröße zu reduzieren. Ist das möglich?

.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>; 
    } 
} 

Der Grund, warum ich nicht px Werte setze ist, weil .text p span verschiedene Klassennamen erhalten, die unterschiedlichen Schriftgrößen haben. Aber sie müssen im gleichen Verhältnis herunterskalieren. Versuche ich das ist nicht erreichbar?

Answer 1

Sie em, wie diese verwendet werden könnten, wo Sie eine Standard auf den Körper gesetzt, oder auf jedem Elternteil Sie von font-size erben wollen, und stellen Sie von dort

Auch rem und % ist möglich, Alternativen, Es kommt alles auf Markup-Struktur usw.

em ist relativ zu seinen direkten oder nächsten Elternteil, rem ist relativ zu den HTML (Root) - ihre Schriftgröße.

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>

Mit rem man kann

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

wie diese tun bin ich nicht der größte Fan von ems aber wenn Sie wollen nur reduzieren 80% verwenden .8em als starken Override von .text ps Schwenkgröße, die Sie eingestellt haben.

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

Answer 3

Es könnte sich lohnen, in Sass/Scss nach Variablen zu suchen und Operatoren darauf anzuwenden. Sie können Ihre Variablen zu Beginn Ihres Sheet festgelegt, und wenn Sie Ihre .sass oder .scss Datei kompilieren, gibt sie die richtige Nummer in Ihrer .css Datei

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

Answer 4

Es ist durchaus möglich und so kann man wohl sagen, Es gibt eine Reihe von Möglichkeiten, dies zu erreichen. Die Technik, die ich verwende, ist sehr einfach:

1. die font-size Auf den body und html Elemente in px, sowie alle Medienabfrage der Schriftgröße nach oben oder unten in px, zu treten.

2. Verwenden Sie rem Einheiten, um die Schriftgröße dort einzustellen, wo Sie sie benötigen. rem steht für root em, wobei root das oberste Element im DOM ist, normalerweise html oder body.

Beispiel:

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 macht es sehr einfach (für mich zumindest) über relative Größen zur Vernunft.

em auf der anderen Seite ist sehr nützlich, wenn ein Wert von font-size des nächsten Elternelements beeinflusst werden soll.

Zum Beispiel, wenn Sie eine Polsterung, die skaliert proportional zur Textgröße eines .heading, dann würden Sie verwenden em haben wollte: em gerade

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