Можно сказать, что во фронтальной разработке разработка мобильного терминала играет ключевую роль, но она сталкивается с затруднениями из-за различных размеров и разрешений устройств. Сегодня[2018-09-16]台风山竹Посадка в провинции Гуандун агрессивна, и выйти на улицу невозможно, так что просто оставайтесь дома и пишите эту небольшую статью... Пожалуйста, ткните в исходный текстздесь - разговор о единицах рем
очень длинная прелюдия
Когда дело доходит до адаптивных макетов для мобильных устройств, вы можете подумать:
1. Как использовать медиа-запросы CSS3
body {
background: yellow;
}
@media screen and (max-width: 400px) {
body {
background: red;
}
}
Ну, этот стиль работы очень тяжелый, потому что ресурсы, такие как изображения и текст, должны быть установлены для разных размеров. Прохладное чувство вырвалось из глубины моего сердца~~~
2. Используйте процент напрямую
Этот способ больше подходит для работы и продвижения мобильного терминала, где изображение страницы занимает всю ширину экрана. Потому что в дизайне будет750pxШирина и другие характеристики дизайна могут быть хорошо адаптированы к различным мобильным телефонам. Затем задача состоит в том, чтобы вырезать картинку...
#percent{
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#percent .item{
flex: 1;
}
#percent .item img{
display: block;
width: 100%;
height: auto;
}
Этот вид вырезания более трудоемкий, если вы посмотрите на гифку выше, то обнаружите, что там три картинки одинаковой ширины и высоты.chromeНа отладчике белые полосы, но это не беда. Потому что его нет на реальной машине. Если ширина вырезанного изображения не разделена поровну, то этот метод процентной адаптации не рекомендуется.
3. Фиксированная ширина
Этот способ больше подходитPCДля разработки терминала нельзя использовать мобильный терминал. Поскольку ширина мобильного терминала достаточна, он может принести достаточно хорошее впечатление, и наиболее важным моментом является то, что его соотношение пикселей равно 1. Это не приведет к деформации содержимого при масштабировании. Если это на мобильной стороне, то хе-хе~
#container{
width: 680px;
background: yellow;
margin: 0 auto;
}
h1{
text-align: center;
}
4. Использование окон просмотра
Область просмотра на мобильном устройстве — это часть экрана устройства, используемая для отображения веб-страницы, а точнее часть браузера, используемая для отображения веб-страницы, но область просмотра не ограничивается размером видимой области браузера. он может быть больше, чем область просмотра браузера, и, возможно, меньше, чем область просмотра браузера.
Он должен быть на сайтеheadустановить на этикеткеmeta,Например:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Что ж, эта точка знаний все еще немного потеряна, пожалуйста, обратитесь к подробному содержаниюУчебник для новичков: Адаптивный веб-дизайн — Viewport. Это не пункт этого сообщения в блоге.
Да, мы можем использоватьREMДавайте адаптируемся: можно сказать, что на данный момент это самое сильное решение для мобильной адаптации...
что такое рем
rem和emЕдиница та же, это относительная единица, разницаemотносительно родительского элементаfont-sizeРасчет,remотносительноHTML-код корневого элементаизfont-sizeрассчитано, так чтоremОн прекрасно обходит сложные иерархические отношения и реализует функции, аналогичные единицам em. По умолчанию размер шрифта, заданный браузером, равен16px, согласно соотношению преобразования16px = 1rem.
Эй, это все фиксированный корневой элемент по умолчанию16pxТеперь, чем устройство отличается от мобильных устройств?
Вопрос также является ответом, мы динамически меняемсяHTML-код корневого элементаНедостаточно размера шрифта по умолчанию! Смотри ниже:
схема адаптивной обработки rem
При использовании макета rem, чтобы быть совместимым с разными разрешениями, мы должны динамически изменять его.根字体, так что все подэлементы в рем единицах масштабируются вместе, чтобы достичь адаптивного эффекта.
Ну а дальше идет динамическое изменение根字体размер вверх, взять курс естьjavascriptПриходите управлять им, иначе откуда вы знаете соотношение пикселей.
Один из них — получить соотношение пикселей [соотношение пикселей = физический пиксель/логический пиксель] черезdevicePixelRatio, его совместимость должна быть в ie11及11+, совместимость хорошая. ладно, без обсужденияIE浏览器Да, зрители проявляют осторожностьIE...
(function(){
var devicePixelRatio = window.devicePixelRatio || 1;
})();
Ну, он адаптирован на мобильный терминал,rem和viewportЭффект соответствия лучше! Полный фрагмент кода выглядит следующим образом:
<head>
<meta name="viewport" />
</head>
(function(){
var fontSizeMatchDeviceWidth = function(){
var deviceWidth = document.documentElement.clientWidth || window.screen.width || 320,
devicePixelRatio = window.devicePixelRatio || 1,
fontSize = (Math.ceil(deviceWidth * 16 / 320)),
scale = 1 / devicePixelRatio; // 默认的缩放
document.documentElement.style.fontSize = fontSize + 'px';
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='+'scale'+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no,viewport-fit=cover'); // 增加viewport-fit=cover适配iphone x
};
(function(){
var ua = navigator.userAgent;
if(/android/i.test(ua) || /ipad|itouch|iphone/i.test(ua)|| /tianqi/i.test(ua)){
fontSizeMatchDeviceWidth();
} else { // pc端优雅降级
document.documentElement.style.fontSize = '24px';
}
})();
})();
На основе вышеизложенного добавьте немного стиля и пройдите полную демонстрацию:
#container{
background: yellow;
margin: 0 auto;
}
h1{
text-align: center;
}
Если есть ошибки, поправьте меня @～@! Для получения дополнительной информации перейдите намой гитхаб