Изменить CSS для Android и iOS ⇐ CSS
-
Anonymous
Изменить CSS для Android и iOS
Я создаю адаптивную целевую страницу, но у меня возникли проблемы с изменением элементов HTML для Android и iOS. Например: Я меняю размер шрифта h1, но на iOS он не меняется, а на Android меняется.
Это мой код:
Стиль.css:
.first-container { фоновое изображение: url("../../../assets/images/desktop/Img\ Head\ Desktop.png"); фоновый повтор: без повтора; размер фона: обложка; фоновая позиция: центр; ширина: 100%; высота: 100вх; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: начало; оправдание-содержание: центр; отступ: 0px 18rem; ч1 { размер шрифта: 3,5vw; вес шрифта: 700; } п { отступ-верх: 2rem; отступ-дно: 2rem; размер шрифта: 1,25vw; выравнивание текста: по ширине; } } .title-first-container { размер шрифта: 1.3rem; @media screen и (максимальная ширина: 400 пикселей) { размер шрифта: 1,5рем; } } .subtitle-first-container { размер шрифта: 1.3rem; @media screen и (максимальная ширина: 400 пикселей) { размер шрифта: 1,5рем; } } .first-container-button { цвет фона: #cc2c2c; белый цвет; граница: нет; радиус границы: 5 пикселей; отступы: 15 пикселей 60 пикселей; размер шрифта: 1.2rem; курсор: указатель; } @media screen и (максимальная ширина: 768 пикселей) { .первый-контейнер { фоновое изображение: url("../../../assets/images/mobile/Img\ Head\ Mobile.png"); фоновый повтор: без повтора; размер фона: обложка; фоновая позиция: центр; ширина: 100%; высота: 100вх; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; заполнение: 0рем 4рем; кнопка { ширина: 100%; } } .first-container-button { цвет фона: #cc2c2c; белый цвет; граница: нет; радиус границы: 5 пикселей; отступы: 15 пикселей 60 пикселей; размер шрифта: 1.2rem; курсор: указатель; } } @media screen и (максимальная ширина: 400 пикселей) { .первый-контейнер { фоновое изображение: url("../../../assets/images/mobile/Img\ Head\ Mobile.png"); фоновый повтор: без повтора; размер фона: обложка; фоновая позиция: центр; ширина: 100%; высота: 100вх; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; заполнение: 0рем 4рем; кнопка { ширина: 100%; отступы: 8 пикселей 20 пикселей; } } .first-container-content { трансформировать: транслировать(0px, 30%); } } index.js:
Можно сделать coração. Eu te ajudo! Доктор Маурисио Медейрос
Кардиолог
CRMCE:9091 RQE:11103 Врач-кардиолог, получивший образование в 2003 году
Федеральный университет Сеара. Профессор де
Кардиология факультета ЮНИТА.
Экокардиографистка Escola Pernambucana de
Экокардиография. Название специальности «Специалист»
Sociedade Brasileira de Cardiologia (RQE 11103).
Владелец и директор клиники CENTROCARDIO
СОБРАЛ, специализированная клиника
кардиологический центр Собрал-Сеара.
Консультация по повестке дня
В основном я хочу сделать размер h1 больше, чем h2 на iPhone 12, центрировать текст и обеспечить минимальное расстояние между элементами.
Я создаю адаптивную целевую страницу, но у меня возникли проблемы с изменением элементов HTML для Android и iOS. Например: Я меняю размер шрифта h1, но на iOS он не меняется, а на Android меняется.
Это мой код:
Стиль.css:
.first-container { фоновое изображение: url("../../../assets/images/desktop/Img\ Head\ Desktop.png"); фоновый повтор: без повтора; размер фона: обложка; фоновая позиция: центр; ширина: 100%; высота: 100вх; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: начало; оправдание-содержание: центр; отступ: 0px 18rem; ч1 { размер шрифта: 3,5vw; вес шрифта: 700; } п { отступ-верх: 2rem; отступ-дно: 2rem; размер шрифта: 1,25vw; выравнивание текста: по ширине; } } .title-first-container { размер шрифта: 1.3rem; @media screen и (максимальная ширина: 400 пикселей) { размер шрифта: 1,5рем; } } .subtitle-first-container { размер шрифта: 1.3rem; @media screen и (максимальная ширина: 400 пикселей) { размер шрифта: 1,5рем; } } .first-container-button { цвет фона: #cc2c2c; белый цвет; граница: нет; радиус границы: 5 пикселей; отступы: 15 пикселей 60 пикселей; размер шрифта: 1.2rem; курсор: указатель; } @media screen и (максимальная ширина: 768 пикселей) { .первый-контейнер { фоновое изображение: url("../../../assets/images/mobile/Img\ Head\ Mobile.png"); фоновый повтор: без повтора; размер фона: обложка; фоновая позиция: центр; ширина: 100%; высота: 100вх; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; заполнение: 0рем 4рем; кнопка { ширина: 100%; } } .first-container-button { цвет фона: #cc2c2c; белый цвет; граница: нет; радиус границы: 5 пикселей; отступы: 15 пикселей 60 пикселей; размер шрифта: 1.2rem; курсор: указатель; } } @media screen и (максимальная ширина: 400 пикселей) { .первый-контейнер { фоновое изображение: url("../../../assets/images/mobile/Img\ Head\ Mobile.png"); фоновый повтор: без повтора; размер фона: обложка; фоновая позиция: центр; ширина: 100%; высота: 100вх; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; заполнение: 0рем 4рем; кнопка { ширина: 100%; отступы: 8 пикселей 20 пикселей; } } .first-container-content { трансформировать: транслировать(0px, 30%); } } index.js:
Можно сделать coração. Eu te ajudo! Доктор Маурисио Медейрос
Кардиолог
CRMCE:9091 RQE:11103 Врач-кардиолог, получивший образование в 2003 году
Федеральный университет Сеара. Профессор де
Кардиология факультета ЮНИТА.
Экокардиографистка Escola Pernambucana de
Экокардиография. Название специальности «Специалист»
Sociedade Brasileira de Cardiologia (RQE 11103).
Владелец и директор клиники CENTROCARDIO
СОБРАЛ, специализированная клиника
кардиологический центр Собрал-Сеара.
Консультация по повестке дня
В основном я хочу сделать размер h1 больше, чем h2 на iPhone 12, центрировать текст и обеспечить минимальное расстояние между элементами.
Мобильная версия