Увеличение размера шрифта панели навигации на маленьком экране

Я хочу увеличить размер шрифта пункта меню панели навигации на маленьком экране, например на мобильном телефоне. Обычно он работает нормально на экране настольного компьютера, но когда экран сворачивается на мобильный телефон, он также работает как обычно, но размер шрифта меню очень мал для чтения. для этого я попробовал код ниже, но он не сработал. Примечание. Я использую загрузочную версию 4.

#m1 {
    color: darkblue;
    font-weight: 450;
    font-size: 1.25rem;
    font-weight: bold;
     @media ( min-width:375px){
      font-weight:bolder;
    }
    
  }
#m1:hover {
    text-decoration: underline;
    text-decoration-color: red;
}
.nav-item {
    list-style-type: disc;
    padding: 1.1;
    margin-left: .5cm;
    margin-right: .0cm;
}

<div class = "collapse navbar-collapse" id = "MyNavBarDiv">
      <ul class = "navbar-nav ml-auto" style = "margin-right: 60px;" >
        <li class = "nav-item">
          <a class = "nav-link" id = "m1" href = "index.html">Home</a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" id = "m1" href = "#">About-us</a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" id = "m1" href = "#">EduCare</a>
        </li>
     </ul>
</div>

Пожалуйста, помогите.

В медиа-запросе вы меняете только толщину шрифта, а не размер шрифта.

— 21.06.2024 13:06

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

— 22.06.2024 09:40

html css navbar

21.06.2024 12:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

#m1 {
    color: darkblue;
    font-weight: 450;
    font-size: 1.25rem;
    font-weight: bold;
     @media ( min-width:375px){
      font-weight:bolder;
      font-size : 1 rem;
    }
    
  }
#m1:hover {
    text-decoration: underline;
    text-decoration-color: red;
}
.nav-item {
    list-style-type: disc;
    padding: 1.1;
    margin-left: .5cm;
    margin-right: .0cm;
}

<div class = "collapse navbar-collapse" id = "MyNavBarDiv">
      <ul class = "navbar-nav ml-auto" style = "margin-right: 60px;" >
        <li class = "nav-item">
          <a class = "nav-link" id = "m1" href = "index.html">Home</a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" id = "m1" href = "#">About-us</a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" id = "m1" href = "#">EduCare</a>
        </li>
     </ul>
</div>

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

— 21.06.2024 22:46

21.06.2024 15:21

Здесь хорошо подойдет подход «сначала мобильные устройства».

Начните с размера шрифта, который вы хотите для мобильных устройств, а затем увеличьте его до минимальной ширины рабочего стола:

#m1 {
    color: darkblue;
    font-weight: 450;
    font-size: 2rem;
    font-weight: bolder;
     @media ( min-width:768px){
      font-weight:bold;
      font-size: 1.25rem;
    }
    
  }
#m1:hover {
    text-decoration: underline;
    text-decoration-color: red;
}
.nav-item {
    list-style-type: disc;
    padding: 1.1;
    margin-left: .5cm;
    margin-right: .0cm;
}

<div class = "collapse navbar-collapse" id = "MyNavBarDiv">
      <ul class = "navbar-nav ml-auto" style = "margin-right: 60px;" >
        <li class = "nav-item">
          <a class = "nav-link" id = "m1" href = "index.html">Home</a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" id = "m1" href = "#">About-us</a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" id = "m1" href = "#">EduCare</a>
        </li>
     </ul>
</div>

отлично. Спасибо.

— 02.07.2024 13:08

21.06.2024 15:28