Исследовал макет главной страницы wap Taobao, Tmall и Netease Lottery 163 и обобщил схему макета мобильного терминала.Примечание: код запускается с использованием файлового протокола. Ссылка на локальные файлы не поддерживается в Chrome, и будет выведена междоменная ошибка. Вы можете открыть его с помощью Firefox или Safari.
Загрузка ppt, сделанная в то время:Исследование плана компоновки мобильного терминала в декабре 2015 г.
1. Основные понятия
1. Физический пиксель
Физический пиксель — это наименьшая физическая единица отображения на мониторе (экране мобильного телефона).
2. Пиксель, не зависящий от плотности
Аппаратно-независимый пиксель (также называемый пикселем, не зависящим от плотности) можно рассматривать как точку в компьютерной системе координат, представляющую виртуальный пиксель, который может использоваться программой (например, пиксель CSS).
3. Растровые пиксели
Пиксель растрового изображения — это наименьшая единица данных растрового изображения (например, png, jpg, gif и т. д.). Каждый пиксель растрового изображения содержит некоторую собственную информацию об отображении (например, позицию отображения, значение цвета, прозрачность и т. д.).
4. Соотношение пикселей устройства (называемое dpr)
Соотношение пикселей устройства = физические пиксели / независимые от устройства пиксели (в одном направлении, x или y)
5. scale
Коэффициент масштабирования: масштаб = 1/dpr
6. Идеальный вьюпорт
<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1" />
2. Схема оформления лотереи
- Используйте масштаб = 1.0, чтобы написать мертвую область просмотра
- Используйте медиа-запросы, чтобы определить значение размера шрифта корневого элемента html, то есть значение rem.
- rem + процентная раскладка
CSS-код медиа-запроса выглядит следующим образом:
//网易彩票的响应式布局是采用媒体查询来改变rem值实现的
//媒体查询css
#media-query{
@media screen and (min-width: 240px) {
html,body,button,input,select,textarea {
font-size:9px!important;
}
}
@media screen and (min-width: 320px) {
html,body,button,input,select,textarea {
font-size:12px!important;
}
}
@media screen and (min-width: 374px) {
html,body,button,input,select,textarea {
font-size:14px!important;
}
}
@media screen and (min-width: 400px) {
html,body,button,input,select,textarea {
font-size:15px!important;
}
}
// 省略
}
3. Схема дизайна Tmall
- Используйте масштаб = 1.0, чтобы написать мертвую область просмотра
- Если rem не используется, font-size=14px тела записывается до смерти
- макет px + flexbox
В-четвертых, проблемы, с которыми столкнулись
1. Под HD-экраном (dpr>1) проблема с размытием линии 1px
В большинстве случаев, когда дизайнеры создают рукописи разных размеров, они сначала рисуют рукописи большого размера (обычно в 2 раза), затем уменьшают размер и, наконец, экспортируют их. Это вызовет проблемы: если дизайнер рисует линию в 1 пиксель в черновике 2x (например, граница: 1 пиксель), то, если мы хотим отобразить ее в масштабе = 1,0, она станет 0,5 пиксель, что очень велико Некоторые мобильные телефоны не могут рисовать 0,5px.
Теоретически 1 пиксель растрового изображения соответствует 1 физическому пикселю, и картинка может отображаться идеально и четко. На обычных экранах проблем нет, но на экранах Retina (dpr=2) будет недостаточно растровых пикселей, что приведет к размытию изображения.
2. Под HD-экраном (dpr>1) проблема с размытием HD-изображения
Для экрана Retina с dpr = 2 1 пиксель растрового изображения соответствует 4 физическим пикселям.Поскольку один пиксель растрового изображения не может быть разделен дальше, можно выбрать только ближайший цвет, что приведет к размытию изображения (обратите внимание на приведенное выше значение цвета). Следовательно, для проблемы изображений высокой четкости лучшим решением является использование удвоенного количества изображений. Например: тег img размером 200 × 300 (css пикселей), вам необходимо предоставить изображение размером 400 × 600.
Для экрана Retina с dpr = 2 1 пиксель растрового изображения соответствует 4 физическим пикселям.Поскольку один пиксель растрового изображения не может быть разделен дальше, можно выбрать только ближайший цвет, что приведет к размытию изображения (обратите внимание на приведенное выше значение цвета). Следовательно, для проблемы изображений высокой четкости лучшим решением является использование удвоенного количества изображений. Например: тег img размером 200 × 300 (css пикселей), вам необходимо предоставить изображение размером 400 × 600.
5. Окончательное решение --> схема дизайна Taobao
- Получите параметры dpr мобильного телефона с помощью обработки js, а затем динамически сгенерируйте точку обзора.
- Получите физическую ширину мобильного телефона в пикселях и разделите ее на 10 частей, ширина каждой части равна размеру rem.
- По размеру эскиза дизайна (px) обрабатывается в трех случаях, с использованием макета px+rem
Соответствующие скрипты следующие:
$(document).ready(function(){
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
var view1 = document.querySelector('#view-1');
if(window.screen.width < 540){
dpr = window.devicePixelRatio || 1;
scale = 1 / dpr;
rem = docEl.clientWidth * dpr / 10;
}else{
dpr = 1;
scale =1;
rem = 54;
}
//貌似最新的淘宝网站又去掉了，只是限制了主体内容的宽度
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置整体div的宽高
view1.setAttribute('style', 'width:'+ docEl.clientWidth+'px; height:'+ docEl.clientHeight+'px');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
$('body').attr('style', 'font-size:' + dpr * 12 +'px');
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;
})
6. Резюме расчетной схемы
Из приведенного выше анализа мы можем легко увидеть, что:
- Решение Netease Lottery быстрое в использовании, отличается высокой эффективностью разработки и хорошей совместимостью, но оно недостаточно гибкое и точное;
- Идея дизайна Tmall относительно проста, а flexbox очень гибок, но с совместимостью flexbox нужно хорошо обращаться, и она недостаточно усовершенствована;
- Решение Taobao почти решает все проблемы, с которыми сталкивается мобильный терминал, что является идеальным решением, но эффективность разработки низка, а стоимость относительно высока.
Добро пожаловать в звезду, чтобы учиться и обмениваться:гитхаб-адрес | мой блог