Я могу установить размер шрифта относительно размера страницы?
Условие «t.status = 0» в предложении WHERE отрицает «внешность» соединения; тот же результат, который мы получили бы с ВНУТРЕННИМ СОЕДИНЕНИЕМ.
При внешнем соединении любые строки в locations, которые не имеют совпадающей строки в turns, будут возвращены со значениями NULL для всех столбцов t.. Несоответствующие строки из locations будут исключены условием в предложении WHERE.
Рассмотрите возможность перемещения этого условия из условия WHERE в предложение ON внешнего соединения.
Или рассмотрите возможность перемещения этого условия в совокупное выражение.
В качестве примера:
SELECT l.id
, l.zipcode
, SUM(IF(t.status = 0, 1, 0)) AS turns
, SUM(IF(t.status = 0 AND t.itemspurchased > 0, t.itemspurchased, 0)) AS items
FROM locations l
LEFT
JOIN turns t
ON t.locationid = l.id
AND t.status = 0
WHERE l.zipcode = XXXX
GROUP
BY l.id
, l.zipcode
9 ответов
Нет, вы не можете установить размер шрифта в процентах относительно размера страницы.
Размер в em основан на размере относительно того, как шрифт обычно отображается в 16 точках.
Если вы хотите, чтобы ваша страница увеличивалась и уменьшалась и оставляла какой-то масштаб для себя, для полей и шрифта, тогда установка в em будет хорошей.
Этот метод позволит масштабировать шрифты и поля страницы, увеличиваясь в относительном размере друг к другу и, надеюсь, не будет выпадать из границ.
См. Новые CSS-модули vh и vw. Поддержка браузеров пока невелика.
http://snook.ca/archives/html_and_css/vm-vh-units
Недавно он попал в WebKit: https://bugs.webkit.org /show_bug.cgi?id=27160
В браузерах, которые его поддерживают, 1 vh составляет 1% (1/100) от высоты области просмотра, а 1 vw составляет 1% (1/100) ) ширины области просмотра. Есть также vmin и vmax единицы, которые представляют меньшее из двух и большее из двух, соответственно.
Попробуйте плагин jQuery, например FitText . Он автоматически изменяет размер текста в соответствии с шириной родительского элемента.
Вот небольшой сценарий, который я сделал для этого точно (используйте его как запасной вариант, когда vw не поддерживается) https://gist.github.com/2475269
По крайней мере, для Firefox, 1em можно использовать для установки размера шрифта, связанного с размером шрифта родителя. Так что, если вы установите размер шрифта тела в значение, которое пропорционально размеру страницы. Все шрифты в теле, которые используют их как единицу, будут относиться к странице.
Чтобы сделать это, вы должны установить размер тела по отношению к странице, например height: 100% или ширину, если вы хотите связать размер с шириной.
Затем вам придется постоянно синхронизировать рост с размером шрифта. Это можно сделать с помощью onResize.
Я рекомендую использовать YUI reset для унификации рендеринга шрифтов в разных браузерах. Затем проверьте YUI Размер шрифта . После этого вы можете положиться на правильное отображение шрифтов.
Вы можете решить это следующим образом:
jQuery(document).ready(function ($) {
// Dynamisches Skalieren von Schriften
fontSize = function(){
//ww = $(window).innerWidth();
ww = $('.mainhead').innerWidth(); // Width of the Motherelement
one = ww/100; // 1%
multiplcator = one*31;
$('.mainhead').css({'font-size': multiplcator+'px'});
}
fontSize();
$(window).resize(function() {
fontSize();
});
});
Когда вы теперь устанавливаете размер шрифта с помощью css, он просыпается во всех браузерах, таких как charm
.mainhead{
width:48%;
font: normal 2em Times, Verdana, sans-serif;
}
Я знаю, что на него уже ответили, но мне нужно поделиться этим на будущее comers, потому что мне потребовалось несколько драгоценных минут, чтобы понять это.
Так как г-н @random сказал: em как единое целое, добьется цели.
Если вы хотите, чтобы ваша страница увеличивалась и уменьшалась и оставляла некоторый масштаб для себя, для полей и шрифта, тогда установка ее в em будет хорошей.
Этот метод позволит увеличивать масштаб шрифтов и блоков страницы относительно друг друга и, надеюсь, не будет выпадать из границ.
Инициализируйте ваш body с 1em как font-size, что означает 100%
body {
font-size: 1em;
}
Затем установите font-size вашего элемента в процентах от родительского
.your_element {
font-size:0.4em /* for example 40% if its parent font-size */
}
Теперь magic из @media запросов
@media all and (max-width: 767px) {
body {
font-size: 0.4em !important;
}
}
@media all and (min-width: 768px) and (max-width: 1023px) {
body {
font-size: 0.6em !important;
}
}
@media all and (min-width: 1024px) and (max-width: 1199px) {
body {
font-size: 0.8em !important;
}
}
@media all and (min-width: 1200px) and (max-width: 1599px) {
body {
font-size: 1em !important;
}
}
@media all and (min-width: 1600px) and (max-width: 1999px) {
body {
font-size: 1.2em !important;
}
}
@media all and (min-width: 2000px) and (max-width: 2999px) {
body {
font-size: 1.6em !important;
}
}
@media all and (min-width: 3000px) and (max-width: 3999px) {
body {
font-size: 1.8em !important;
}
}
@media all and (min-width: 4000px) {
body {
font-size: 2em !important;
}
}
И Бинго, хорошего дня.
Когда вы говорите «относительно размера страницы», что именно вы имеете в виду под «размером страницы»?
Окно браузера? Тогда размер ваших шрифтов изменится, когда пользователь изменит размер окна - определенно не так, как можно было ожидать, и довольно плохо для удобства использования. Люди не изменяют размеры окон, чтобы увидеть большее или меньшее представление всего сайта, они увеличивают их, чтобы видеть больший раздел сайта, и делают окна меньшими, чтобы видеть определенный маленький раздел и имеют место для другие окна рядом с браузером.
Если вы имеете в виду размер экрана, это еще хуже, поскольку это означало бы огромные шрифты на 30-дюймовом экране. Но люди не покупают 30-дюймовые экраны, поэтому они могут видеть огромные шрифты, они покупают их, чтобы видеть несколько окон. бок о бок.
В общем, использование em или чего-то подобного - единственный разумный способ сделать масштабируемый веб-сайт, поскольку он будет масштабироваться относительно размера по умолчанию, который / должен быть относительно того, что пользователь может комфортно читать.