изменить веб-страницу в соответствии с размером экрана

Question

Я разрабатываю веб-сайт, я хочу, чтобы мой сайт открывал все размеры экранов, таких как Desktop различных размеров, iphone, ipad и т. Д. Я тестирую его в браузере Safari. Если я изменяю размер браузера, тогда данные и изображения внутри должны быть настроены в соответствии с этим размером. Для этого я использовал Liquid Layout. Но я не могу установить абзац в процентах. Я тоже их попробовал. Итак, я сделал 25px. Итак, вот проблема, когда я изменяю размер моего браузера, изображения внутри веб-страницы меняются в соответствии с размером, который больше и меньше, но размер шрифта постоянный. Как это сделать?

Благодарю вас заранее.

Answer 1

В вашем CSS попробуйте p { word-wrap: break-word; width: 100%; }.

Магия word-wrap: break-word; Что это означает, заполняет контейнер по высоте, но сохраняет свою ширину.

Кроме того, вам не нужно устанавливать font-size в %, но вы можете использовать px.

http://jsfiddle.net/kQEM8/1/

EDIT: Так как вы пересмотрели свой вопрос, вы имели в виду что-то вроде этого? Попробуйте запустить его в jsfiddle, а затем измените размер вашего браузера.

http://jsfiddle.net/kQEM8/2/

window.onresize = function(event) { 
    document.getElementById('test').style.fontSize = (document.width * 0.1)+'px' 
}