Основы адаптивного макета интерфейса — rem

внешний интерфейс Google PostCSS

Отказ от ответственности

Содержание этой статьи поверхностное, если вам не нравится, не распыляйтесь

Что такое рем?

rem - это единица шрифта корневого элемента, например.html{font-size:16px;}, 1rem эквивалентен 16px.

Может использоваться не только для шрифтов, но и для других единиц измерения пикселей, таких как установкаpadding:2rem, что эквивалентно 32px.

Рекомендации по адаптивному макету

Требования к адаптивному макету (взято из ZhihuZ Yuhan):

1 . блок контентаМасштабируемость: блоки контента могут автоматически корректироваться до определенной степени, чтобы они заполнили всю страницу.

2 . блок контентаСвободное расположение: когда размер страницы сильно меняется, количество колонок можно уменьшить/увеличить.

3 .полеАдаптация: к тому времени, когда размер страницы изменится больше, поля блоков также должны измениться.

4 .картинаАдаптация: при обычной регулировке ширины изображение по-прежнему красиво и удобно, когда две стороны скрыты.

5 .содержаниеМожет быть автоматически скрыт/частично отображен: например, большой текст описания, отображаемый на компьютере, может отображаться только в небольшом количестве или полностью скрываться на мобильном телефоне.

6 .Навигация и менюМожет автоматически сворачиваться: разворачиваться или сворачиваться, следует судить по размеру страницы

7 .шрифтПри масштабировании шрифт также продолжает масштабироваться

какая польза от рем

Откажитесь от единицы px и используйте rem в качестве единицы, чтобы на устройствах разных размеров путем изменения корневого узлаfont-sizeразмер, чтобы добиться равного масштабирования

Предполагая, что ширина устройства составляет 600 пикселей, а на странице есть только 2 элемента div в одной строке, используйте ширину rem для установки следующим образом.

html{
    font-size:10px;
}
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}

Теперь переключитесь на устройство с шириной 400 пикселей, сохраните пропорции такими же, просто измените размер шрифта.

//在js计算字体大小，x为缩小比例
400/600=x/10
x=6.6

html{
    font-size:6.6px;/*实际上使用js动态改变，也可以配置媒体查询*/
}
/*以下保持不变*/
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}

Почему бы не использовать проценты? Разве это не просто

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

как использовать

1. Установите размер шрифта для корневого элемента и исправьте его в элементе body

html{font-size:100px;}
body{font-size:14px;}

После настройки, как указано выше, используйте rem вместо px, просто разделите 100 напрямую.

.menu li{
	display: table-cell;
	padding: .1rem .3rem;/*相当于10px 30px*/
}

2. Привяжите событие прослушивателя, измените размер шрифта после загрузки dom и при изменении размера.

Обратите внимание, что в коде1536Измените ширину страницы во время фактической разработки

//改变font-size
(function(doc,win){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(!clientWidth) return;
        //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
        docEI.style.fontSize = 100*(clientWidth/1536)+'px';
    }

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);

Автоматически конвертировать в бэр

Смотрите postcss, чтобы следовать. . .

A & Q

  • почему бы не установитьfont-size:62.5%?

    Поскольку некоторые версии Google не поддерживают размер шрифта 10 пикселей.

  • почему бы не использоватьem?

    Как и проценты, неудобно считать относительно родительского элемента

  • почему бы не использоватьviewportПропорциональное масштабирование?

    Практика вьюпорта:

    <meta name=" viewport " content=" width=320, maximum-scale=1.3, user-scalable=no ">

    Этот метод заключается в пропорциональном масштабировании экрана, и он будет искажен, если масштаб будет слишком большим.

  • Отвечает ли использование rem web?

    Нет, rem — это просто пропорциональное масштабирование, оно решает толькоРекомендации по адаптивному макетучасть проблемы, но также необходимо сотрудничать с запросами СМИ

Категории