2015-12-22 2 views
-2

есть ли какой-либо метод, возможно, использование php (исключая js/jquery, поскольку я не знаю, как его использовать), чтобы заставить пользователей зацикливать и использовать его для создания css работайте с этимКак отображать мою страницу в зависимости от размера экрана пользователя

например, если я использую проценты вместо пикселей, чтобы настроить свои высоты и ширину, он по-прежнему не отвечает размеру экрана моего телефона, и пользователю нужно увеличивать масштаб, чтобы четко видеть информацию, это не делает его больше, и тем самым я имею в виду не только текст, изображения и элементы html, такие как divs/spans/we ...

также я не хочу использовать bootstrap, я хочу понять как это работает, использование бутстрапа - это как управлять автоматом, не зная как вести руководство ...

+1

Медиа-запросы. читайте о них. – andi

+0

Типичное решение для реагирования основано на запросах [@media] (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp). Это причудливое имя для условных оберток вокруг вашего CSS-кода. CSS, заключенный в запрос, применяется только в том случае, если условие истинно. –

+0

Почему я всегда получаю отрицательный рейтинг на вопрос, когда я его спрашиваю, я пробовал искать способы сделать это, и я не могу его найти, если бы я мог бы не спрашивать, люди предпочли бы -1 вопрос чем давать указания, чистое незнание, в любом случае спасибо/multumesc andrei, o sa citesc despre media query – SebastianZdroana

ответ

0

Есть некоторые рамки, которые помогут вам получить такое поведение. Один из самых простых - Twitter Bootstrap. Его очень легко настроить и понять. Он использует сетку для определения размера элементов на вашей странице относительно ширины устройства. Кроме того, есть много готовых элементов, которые могут помочь вам начать работу.

Другая полезная структура: foundation, концепция очень похожа на twitter bootstrap. Хотя он более гибкий, требуется немного больше времени, чтобы понять, как его использовать.

Если вы собираетесь использовать адаптивную функциональность самостоятельно, или если вам интересно узнать, как это делается на самом деле, вы должны исследовать медиа-запросы.

1

Одним из важнейших вещь в веб-дизайне для небольших устройств, чтобы включить это в заголовке всех страниц:

<meta name="viewport" content="width=device-width"; initial-scale="1.0" /> 

Он отключает автоматический «усадка»/downzooming содержимого страницы на текущем видовом экране (= экран), что важно для смартфонов и планшетов. Пиксель остается пикселем, поэтому, если ваш экран смартфона имеет ширину всего 320 пикселей, это ограничение ширины в абсолютных пикселях.

Если это не включено, встроенная автоматическая система просто интерпретирует ширину нечувствительной страницы как 100% и сжимает ее до ширины устройства, что приведет к крошечным шрифтам и изображениям, которые вы можно увидеть на каждом сайте, не относящемся к репсонам.

После этого вам придется подружиться со средствами массовой информации ...