brOggo
https://codepen.io/omerkarahan/pen/OjrWbm
Merhaba arkadaşlar, elimden geldiğimce forumlarda aktif olmaya ve bunu yaparkende geçmiş projelerden kalan kodlarımı sizlerle paylaşmaya gayret gösteriyorum, SCSS uzantılı dosyalarla CSS dosyalarını kodlarla oluşturmaya ve birkaç başlangıç parametresi ile çeşitli varyasyonlarda CSS çıktıları almayı mümkün kılan SASS ile kodladığım bu font_size oluşturucu senaryoda ;
$viewport_size_kullanilsin : true;
$marginler_ayarlansin : true;
parametreleri ile oynayarak ister @@media_query ler ile ister yavaş yavaş yaygınlaşmaya başlayan vw ve vh yöntemleri ile font-size responsive yapılabiliyor.
320px - 12px.
480px - 13px.
640px - 14px.
860px - 1152px - 16px.
2200px > 18px olarak ayalarlanan bu senaryoyu eğer biraz SASS bilginiz varsa düzenleyip kendi boyutlandırmanıza göre şekillendirebilirsiniz.
! Bu projedeki yanlışlarım hakkında beni bilgilendirirseniz çok sevinirim :)
/*
Bu dosya ile bir algoritma sayesinde font-boyutları yapılandırılacaktır.
Burada yapılandırılacak ana font boyutları şunlardır ;
html , h1, h2 , h3 , h4 , h5 , h6
@parametreler
@boyutlar;
*/
$viewport_size_kullanilsin : true;
$marginler_ayarlansin : true;
$istenen_baslangic : 860;
$istenen_font_size : 16;
$minimum_responsive_boyut : 320;
$minimum_font_size : $istenen_font_size - 4;
$maksimum_responsive_boyut : 1540;
$responsive_bitisi : 6400;
$maksimum_font_size : 18;
$font_boyutlari : (
varsayilan:$istenen_font_size,
'#{$maksimum_responsive_boyut}': $maksimum_font_size,
'#{$istenen_baslangic}': $istenen_font_size,
'640': $istenen_font_size - 2,
'480': $istenen_font_size - 3,
'#{$minimum_responsive_boyut}': $minimum_font_size,
);
$element_boyutlari :(
/* tip varsayilan '320' '480' '640' '860'*/
h1: (varsayilan:3, '320':2, '480':2, '640':2, '860':2.5, '1540':2.5),
h2: (varsayilan:2, '320':1.625, '480':1.625, '640':1.625, '860':2, '1540':2),
h3: (varsayilan:1.625, '320':1.375, '480':1.375, '640':1.375, '860':1.625, '1540':1.625),
h4: (varsayilan:1.125, '320':1.125, '480':1.125, '640':1.125, '860':1.125, '1540':1.125),
h5: (varsayilan:1, '320':1, '480':1, '640':1, '860':1, '1540':1),
h6: (varsayilan:0.75, '320':0.75, '480':0.75, '640':0.75, '860':0.75, '1540':0.75),
span: (varsayilan:1.125, '320':1.125, '480':1.125, '640':1.125, '860':1.125, '1540':1.125),
blockquote: (varsayilan:1.375, '320':1.375, '480':1.375, '640':1.375, '860':1.375, '1540':1.325),
p: (varsayilan:1, '320':1, '480':1, '640':1, '860':1, '1540':1),
'._fbuyuk': (varsayilan:2, '320':1.625, '480':1.625, '640':1.625, '860':2, '1540':2),
'._forta': (varsayilan:1, '320':1, '480':1, '640':1, '860':1, '1540':1),
'._fkucuk': (varsayilan:0.625, '320':0.625, '480':0.625, '640':0.625, '860':0.625, '1540':0.625)
);
$element_marginleri : (
h1: (margin:'1 0 1 0', oran:0.50, birim:'em'),
h2: (margin:'1 0 1 0', oran:0.40, birim:'em'),
h3: (margin:'1 0 1 0', oran:0.40, birim:'em'),
h4: (margin:'1 0 1 0', oran:0.40, birim:'em'),
h5: (margin:'1 0 1 0', oran:0.30, birim:'em'),
h6: (margin:'1 0 1 0', oran:0.30, birim:'em'),
p: (margin:'0 0 1 0', oran:0.75,birim:'rem')
);
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@function boyutu_getir($tip){
$boyut_tip: map-get($font_boyutlari, #{$tip});
@return $boyut_tip;
}
@function varsayilani_getir($tip){
$varsayilan_etiket: map-get($element_boyutlari, #{$tip});
$varsayilan_deger: map-get($varsayilan_etiket, varsayilan);
@return $varsayilan_deger;
}
@function calc_uydur($map) {
/* bir bilinmeyenli denklem oluşturma komutu.*/
// Get the number of provided breakpoints
$length: length(map-keys($map));
// Error if the number of breakpoints is < 2
@if ($length < 2) {
@error "leastSquaresFit() $map must be at least 2 values"
}
// Calculate the Means
$resTotal: 0;
$valueTotal: 0;
@each $res, $value in $map {
$resTotal: $resTotal + $res;
$valueTotal: $valueTotal + $value;
}
$resMean: $resTotal/$length;
$valueMean: $valueTotal/$length;
// Calculate some other stuff
$multipliedDiff: 0;
$squaredDiff: 0;
@each $res, $value in $map {
// Differences from means
$resDiff: $res - $resMean;
$valueDiff: $value - $valueMean;
// Sum of multiplied differences
$multipliedDiff: $multipliedDiff + ($resDiff * $valueDiff);
// Sum of squared resolution differences
$squaredDiff: $squaredDiff + ($resDiff * $resDiff);
}
// Calculate the Slope
$m: $multipliedDiff / $squaredDiff;
// Calculate the Y-Intercept
$b: $valueMean - ($m * $resMean);
// Return the CSS calc equation
@return calc(#{$m*100}vw + #{$b}px);
}
@mixin font_boyutlari_ayarla($elementler,$etiket:varsayilan) {
$boyut: boyutu_getir($etiket);
html {
font-size: #{$boyut}px;
@if $viewport_size_kullanilsin {
/* vw'orana göre şekillenecek. */
/* Burada minimum boyut ile ideal boyut arasında mutlak artışı sağlayacak bir
iterasyon yazmalıyız. ki bu iterasyon en son 18px'de son bulsun.
*/
$harita: ($minimum_responsive_boyut:$minimum_font_size,$istenen_baslangic:$istenen_font_size,$maksimum_responsive_boyut:$maksimum_font_size - 1);
font-size: calc_uydur($harita);
}
}
@each $tip, $degerler in $elementler {
$boyut_orani: map-get($degerler,#{$etiket});
$px_degeri: round($boyut_orani * $boyut);
#{$tip} {
font-size:#{$px_degeri}px;
font-size:#{$boyut_orani}rem;
line-height:1.5em;
@if $marginler_ayarlansin {
@if map-has-key($element_marginleri,#{$tip}) {
$margin_degerleri: map-get($element_marginleri,#{$tip});
$margin: map-get($margin_degerleri,'margin');
$margin_orani: map-get($margin_degerleri,'oran');
$margin_birim: map-get($margin_degerleri,'birim');
$degistirilecek: #{$margin_orani}#{$margin_birim};
$kod: str_replace($margin,'1',$degistirilecek);
margin: #{$kod};
}@else {
margin:0;
}
}
}
}
}
/* Varsayılan ayarlama. */
@include font_boyutlari_ayarla($element_boyutlari);
@each $tip, $boyut in $font_boyutlari {
@if $tip != varsayilan and $viewport_size_kullanilsin != true {
@if $tip == '#{$maksimum_responsive_boyut}' {
@media only screen and (min-width: #{$maksimum_responsive_boyut}px) and (max-width: #{$responsive_bitisi}px) {
@include font_boyutlari_ayarla($element_boyutlari,$tip);
}
}@else {
@media only screen and (max-width: #{$tip}px){
@include font_boyutlari_ayarla($element_boyutlari,$tip);
}
}
}
} 
