Блог

Главная - Вопросы по программированию - как изменить размер полей в моей модели коробки, чтобы они соответствовали экрану мобильного устройства?

как изменить размер полей в моей модели коробки, чтобы они соответствовали экрану мобильного устройства?

#html #css

Вопрос:

Я довольно новичок в html и не очень опытен в использовании коробочной модели. На рабочем столе мой сайт выглядит так, как я хочу, но на мобильном телефоне он выглядит некачественно. Кто-нибудь может мне помочь? Спасибо!

вот моя испорченная веб-страница: https://lilypad9000.neocities.org/home2.html

вот мой код:

 <style>

a {
  display: block;
  background-color: #dddddd;
  color: DarkOrchid;
  width: 200px;
}
h1 {
  background-color: #000;
  width: 230px;
  margin-left: auto;
  margin-right: auto;
}
div {
  background-color: #330033;
  width: 1000px;
  border: 2px solid #32174D;
  padding: 5px;
  margin: 20px;
  margin-left: auto;
margin-right: auto;
</style>

спасибо, извините, если этот вопрос уже был задан, я не смог найти четкого ответа :p.

Комментарии:

1. начните здесь: w3schools.com/howto/howto_js_get_current_window.asp

2. Я бы начал с настройки окна просмотра , а затем использовал медиа-запросы css .

Ответ №1:

Вы можете использовать запрос @media {//все внутри здесь} или запросы @container {//все внутри здесь} Я бы рекомендовал вам взглянуть на пару учебных пособий или уроков, хотя

Ответ №2:

Вы можете использовать медиа-запросы, см. Следующий пример

 @media (max-width: 667px) {
  div {
     // put whatever style you want
  }
}

Я привел в качестве примера 667 пикселей, это означает, что когда окно начинается с 667 пикселей и меньше, выполните следующий стиль

если вы хотите установить стиль между различными размерами экрана, вы можете следовать следующему примеру

 @media (min-width: 667px) and (min-width: 400px) {
  div {
     // put whatever style you want
  }
}

Смотрите эту статью это очень полезно

Метки: ,