Нужна помощь в преобразовании шаблона в шаблон мобильного браузера.

Мне нужна небольшая помощь в преобразовании этого прикрепленного файла шаблона в шаблон, который также можно использовать в мобильных браузерах.

Все, что мне нужно, это 2 вещи,

1. правильные размеры шрифтов, чтобы пользователям не приходилось увеличивать масштаб для чтения на мобильных устройствах,

Если это возможно, шрифт автоматически подстраивается на экранах ноутбуков и не выглядит слишком большим.

Какие настройки размера шрифта мне следует использовать?

2. И дизайн автоматически растягивается слева направо, чтобы я мог использовать доступное пространство.

Я не хочу, чтобы веб-страница выходила за пределы горизонтальной ширины экрана...

Просто автоматически вписывается слева направо.

Можно ли будет использовать этот же шаблон в мобильных браузерах, а также в браузерах ноутбуков? Пожалуйста, предложите изменения, которые мне необходимо внести в прикрепленный файл шаблона. Спасибо

Привет, Не могу найти упомянутые вами статьи. Большинство сообщений @deathshadow, которые я нашел, посвящены поддержанию структуры HTML. Я думаю, что дизайн моего шаблона довольно гибкий, но моя главная проблема — размеры шрифтов. Как установить размер шрифта, чтобы он был удобен как для мобильных пользователей, так и для пользователей ноутбуков? Спасибо

@смертельная тень Огромное спасибо за помощь.

С этого момента я обязательно начну использовать шрифт em, а также учту другие замечания, высказанные вами. Два меню разделены.

Первый предназначен для основной навигации веб-сайта для доступа к различным разделам веб-сайта.

Во-вторых, это в основном пользовательские параметры, такие как вход/выход, редактирование профиля и т. д.

Другие CSS, такие как .div1, .div2 и т. д., должны использоваться при выводе различных данных, извлеченных из базы данных.

Еще раз я очень благодарен вам за то, что вы нашли время исправить мой код и все исправить, чтобы у меня не возникало проблем в будущем!

Однако у меня есть один вопрос.

В разделе контента CSS есть это

 
content{ max-width: 100em; }

Код (разметка): И когда я открываю шаблон в браузере, текст внутри содержимого занимает примерно половину моего экрана.

Остальная часть экрана справа пуста. Когда я меняю его на:

  content{ max-width:48em; } 

Код (разметка): тогда все в порядке. Подходит ли эта настройка для мобильных браузеров? Или это испортит работу мобильных телефонов? Есть ли особая причина, по которой мы устанавливаем значение 48em? Еще раз, Ваша помощь очень ценна, большое-много-многое спасибо.