CSS Рендеринг моего заголовка некорректно на устройствах малой ширины (iPhone SE и т. Д.) - PullRequest
Новая
       8

CSS Рендеринг моего заголовка некорректно на устройствах малой ширины (iPhone SE и т. Д.)

0 голосов
/ 17 декабря 2018

Я создаю сайт для домашнего инспектора.У меня странная проблема с CSS, которую я не могу понять.

Шаги для воспроизведения

  1. Запуск сайта в виде iPhone / Android в портретном режиме (iPhone 8 или iPhone SE)(Макс. Ширина: 400).(На iPhone 8 Plus последняя буква перекрывает информационную кнопку)
  2. Название компании находится ниже NavBar (когда оно должно быть в белом поле)

Веб-сайтс выдачей: http://oneorangetree.com/index.html

iPad CSS issue iPhone 8 Plus Portrait CSS Issue iPad mini iPhone SE CSS Issue

* могут быть другие проблемы, которые я еще не обнаружил

Я мог бы вставить свой CSS-файл, но я думаю, что он как-то связан с .brand-name 

@media(min-width:1400px){
    .rd-navbar-default .rd-navbar-static .rd-navbar-brand .brand-logo{
        width:57px;
        height:57px
    }
    .rd-navbar-default .rd-navbar-static .rd-navbar-brand .brand-name{
        margin-left:10px
    }
    .rd-navbar-default .rd-navbar-static .rd-navbar-brand .brand-name span:nth-child(1){
        font-size:54px;
        line-height:38px
    }
    .rd-navbar-default .rd-navbar-static .rd-navbar-brand .brand-name span:nth-child(2){
        margin-top:9px;
        font-size:14px;
        line-height:10px
    }
}

.rd-navbar-default .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand .brand-logo,.rd-navbar-default .rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand .brand-logo{
    width:34px;
    height:34px
}
.rd-navbar-default .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand .brand-name,.rd-navbar-default .rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand .brand-name{
    margin-left:6px
}
.rd-navbar-default .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand .brand-name span:nth-child(1),.rd-navbar-default .rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand .brand-name span:nth-child(1){
    font-size:32px;
    line-height:23px
}
.rd-navbar-default .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-brand .brand-name span:nth-child(2),.rd-navbar-default .rd-navbar-static.rd-navbar--is-clone .rd-navbar-brand .brand-name span:nth-child(2){
    margin-top:5px;
    font-size:8px;
    line-height:6px
}

.rd-navbar-default .rd-navbar-fullwidth .rd-navbar-brand .brand-logo{
    width:34px;
    height:34px
}
.rd-navbar-default .rd-navbar-fullwidth .rd-navbar-brand .brand-name{
    margin-left:6px
}
.rd-navbar-default .rd-navbar-fullwidth .rd-navbar-brand .brand-name span:nth-child(1){
    font-size:32px;
    line-height:23px
}
.rd-navbar-default .rd-navbar-fullwidth .rd-navbar-brand .brand-name span:nth-child(2){
    margin-top:5px;
    font-size:8px;
    line-height:6px
}

IЯ относительно новичок в веб-разработке переднего плана.

Ответы [ 2 ]

0 голосов
/ 17 декабря 2018

Вы можете установить размер текста с помощью vw unit вместо px.Он автоматически изменит размер текста по сравнению с размером браузера 

font-size: 3vw;

Использование этого с экранным запросом делает его более плавным.

0 голосов
/ 17 декабря 2018

Размер названия компании определяется как 

.rd-navbar-default .rd-navbar-fixed .rd-navbar-brand .brand-name span:nth-child(1) {
    font-size: 27px;
}

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

Так что вам придется добавить медиа-запросы в ваш CSS, чтобы изменить размерэтого текста на разной ширине экрана, если он вам не нравится.

Например, при ширине 414 пикселей (iPhone 6/7/8 плюс) вам нужно что-то вроде этого, чтобы уменьшить размер шрифта до 25 пикселей (обратите внимание, что это max-width не min): 

@media(max-width: 414px) {
    .rd-navbar-default .rd-navbar-fixed .rd-navbar-brand .brand-name span:nth-child(1) {
        font-size: 25px;
    }
}

Вам нужно будет делать то же самое на 375px и 320px.

При этом имейте в виду, что более низкие правила в вашем CSS-файле переопределяют более высокие (особенно учитывая то, что происходит при конфликте правил min-width и max-width).По этой причине я предлагаю добавить все ваши исправления в конец файла, это должно упростить задачу.

...