Отзивчив шрифт медиен запитване по-малко цикъл - css, бримки, отзивчив дизайн, по-малко, медийни запитвания

Мислех, че това ще бъде полезен урок за това как да се създаде цикъл в по-малко, които създават медийни заявки, за да позволят отзивчиви шрифтове.

Бях недоволен от това как шрифтът ми никога няма да бъде мащабендокато всичките ми DIV и изображения ще го направят. Както намалявате. Шрифтът изглежда по-голям, което прави дизайна и оформлението ужасни. Разбира се, че бих могъл да го оставя по този начин и нека текстът да се обвие, но това също изглежда ужасно.

Отговори:

Така че създадох тези медийни заявки постепенноувеличава размера на шрифта на всеки 20 пиксела с 0.05. Тогава това се превърна в по-малко логика, така че да мога да използвам по-малко код. Въпреки това, аз съм включен и css и по-малко долу.

С промяна на шрифта на всеки 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";
}
}

За най-добри отзиви в медийните заявки използваме класа 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) {

}