Започваме с играта с нашия модул за публикации в блога, като се занимаваме с разстояния. Също така добавяме малкото цветно квадратче в горния ляв ъгъл на модула, визуално обозначаващо вида на съдържанието, което представлява.
Следващата промяна, която правим, е да намалим някои от външните пропуски при по-тесни размери на екрана. На широките екрани съдържанието е с 80% ширина (ръбове с ширина 10%), но е по-добре да отидете по-скоро като 90% на по-малки екрани (ръбове с ширина 5%).
Ние добавяме малко преход, когато тази медийна заявка удари, което може да бъде наистина забавен трик на дизайнера. Харесва ми в това видео, но в крайна сметка това е извлечено от дизайна. Може да стане разкъсано, когато на страницата има много повече съдържание и по-скоро разсейващо.
Ние променяме нашата мрежа мрежа, за да има точка на прекъсване с най-малкия размер. Това е супер лесно, просто спираме да плаваме по колоните и ги правим width: 100%;Yay, за да не прекаляват с мрежите! По пътя се борим с някои специфични проблеми.
Отваряме истинския iOS симулатор, за да проверим мрежата, работеща на „истинско“ мобилно устройство. Ние се мъчим малко да намерим правилния мета маркер, но в крайна сметка ще вземем правилния от CSS-Tricks.com. Работи! Но разбира се имаме някои проблеми с позиционирането, които ще трябва да решим. За протокола този мета таг е:
Ние се занимаваме с майсторство с разстояния и оразмеряване, докато нещата изглеждат добре. Нещата изглеждат доста добре отзивчиви до края!