响应式字体媒体查询更少循环

Question

我认为这将是一个有用的教程，如何创建一个循环少于创建媒体查询以允许响应字体。

我很不满意我的字体永远不会缩放，而我的所有DIV和图像都会这样做。当你缩小。字体似乎变得更大，使得设计和布局看起来很糟糕。当然，我可以这样离开它，让文本换行，但看起来也很糟糕。

Answer 1

因此，我创建了这些媒体查询，以0.05递增地将字体大小每20个像素增加0.05。然后，演变成更少的逻辑，以便我可以使用更少的代码。不过，我已经包含了css和less bellow。

随着字体每20像素的大小改变可以看起来有点波涛汹涌。但是，那要好得多，只有3个媒体查询才能更改字体大小。这是垃圾。懒惰。为什么要手动？我离题了。看到循环的优势在于，您可以优化和增加媒体查询的数量，从而在字体/浏览器大小调整中获得更平滑的效果。

最后一件事。一旦你有你这样的字体设置;到html。其他一切必须设置为百分比字体大小。这样他们是HTML字体大小的百分比，并且会有响应。这里有一个例子：

html{ 
    font-size: 1em; 
} 
h1{ 
    font-size: 120%; //1.2em 
} 
h2{ 
    font-size: 110%; //1.1em 
} 

请告诉我你的想法。

- 爱PAT

LESS LOOP：

//Set font for 300 pix devices and lower. Font size will increase by 0.05 every 5pix of width. 
@fontSize: 0.7em; //em 

//@media start at? 
@screenWidth: 300px; 
@screenWidthMax: 640px; 
@loop: (((@screenWidthMax - @screenWidth)/20)-1); 

//Size for 640px and above 
@fontSizeMath640: round(@fontSize + (@fontSize * (0.05*(@loop+2))),2); 
@media (min-width: @screenWidthMax) { 
    html { 
    font-size: "@{fontSizeMath640}"; 
    } 
} 

//Create loop that repeats from 300 pix all the way to 640 pix incrementing by 20px. So, (640-300=340)/20=17. Loop 68 times. 
.responsiveFont (@index) when (@index >= 0) { 
    @minWidth: (@screenWidth+(20*@index)); 
    @maxWidth: (@minWidth + 19); 
    @fontSizeMath: round(@fontSize + (@fontSize * (0.05*(@index+1))),2); 
    @media (min-width: @minWidth) and (max-width: @maxWidth) { 
    html { 
     font-size: "@{fontSizeMath}"; 
    } 
    } 
    // next iteration 
    .responsiveFont(@index - 1); 
} 

// end the loop when index is 0 
.responsiveFont (0) {} 

// "call" the loopingClass the first time with highest value 
.responsiveFont (@loop); 

//Size for 300px and below 
@media (max-width: @screenWidth) { 
    html { 
    font-size: "@{fontSize}"; 
    } 
} 

打印出这一点： CSS

@media (min-width: 640px) { 
    html { 
    font-size: "1.33em"; 
    } 
} 
@media (min-width: 620px) and (max-width: 639px) { 
    html { 
    font-size: "1.29em"; 
    } 
} 
@media (min-width: 600px) and (max-width: 619px) { 
    html { 
    font-size: "1.26em"; 
    } 
} 
@media (min-width: 580px) and (max-width: 599px) { 
    html { 
    font-size: "1.22em"; 
    } 
} 
@media (min-width: 560px) and (max-width: 579px) { 
    html { 
    font-size: "1.19em"; 
    } 
} 
@media (min-width: 540px) and (max-width: 559px) { 
    html { 
    font-size: "1.15em"; 
    } 
} 
@media (min-width: 520px) and (max-width: 539px) { 
    html { 
    font-size: "1.12em"; 
    } 
} 
@media (min-width: 500px) and (max-width: 519px) { 
    html { 
    font-size: "1.08em"; 
    } 
} 
@media (min-width: 480px) and (max-width: 499px) { 
    html { 
    font-size: "1.05em"; 
    } 
} 
@media (min-width: 460px) and (max-width: 479px) { 
    html { 
    font-size: "1.01em"; 
    } 
} 
@media (min-width: 440px) and (max-width: 459px) { 
    html { 
    font-size: "0.98em"; 
    } 
} 
@media (min-width: 420px) and (max-width: 439px) { 
    html { 
    font-size: "0.94em"; 
    } 
} 
@media (min-width: 400px) and (max-width: 419px) { 
    html { 
    font-size: "0.91em"; 
    } 
} 
@media (min-width: 380px) and (max-width: 399px) { 
    html { 
    font-size: "0.88em"; 
    } 
} 
@media (min-width: 360px) and (max-width: 379px) { 
    html { 
    font-size: "0.84em"; 
    } 
} 
@media (min-width: 340px) and (max-width: 359px) { 
    html { 
    font-size: "0.8em"; 
    } 
} 
@media (min-width: 320px) and (max-width: 339px) { 
    html { 
    font-size: "0.77em"; 
    } 
} 
@media (min-width: 300px) and (max-width: 319px) { 
    html { 
    font-size: "0.73em"; 
    } 
} 
@media (max-width: 300px) { 
    html { 
    font-size: "0.7em"; 
    } 
} 

Answer 2

为了获得最佳的响应媒体查询，我们使用Bootstrap类定义的地方这些：

/* Small devices (@screen-sm-min Phones (<768px)) */ 
@media (min-width: 368px) { 

} 

/* Small devices (@screen-sm-min tablets, 768px and up) */ 
@media (min-width: 768px) { 

} 

/* Medium devices (@screen-md-min desktops, 992px and up) */ 
@media (min-width: 992px) { 

} 

/* Large devices (@screen-lg-min large desktops, 1200px and up) */ 
@media (min-width: 1200px) { 

}