Ми починаємо з гри з нашим модулем допису в блозі, возитися з інтервалами. Ми також додаємо маленький кольоровий квадрат у верхньому лівому куті модуля, візуальне позначення типу вмісту, яким він є.
Наступною зміною, яку ми робимо, є зменшення деяких зовнішніх прогалин при вузьких розмірах екрану. На широких екранах вміст має 80% ширини (10% ширини країв), але краще відчувати себе як 90% на менших екранах (5% ширини країв).
Ми додаємо невеликий перехід, коли цей медіа-запит потрапляє, що може бути дуже цікавим трюком дизайнера. Мені це подобається у цьому відео, але врешті-решт це витягнуто з дизайну. Це може стати нестабільним, коли на сторінці набагато більше вмісту і досить відволікає.
Ми змінюємо нашу мережеву систему, щоб мати точку зупинку при найменшому розмірі. Це надзвичайно просто, ми просто перестаємо плавати колонами і робимо їх width: 100%;Yay за те, що вони не надто продумують сітки! По дорозі ми стикаємось із деякими проблемами конкретності.
Ми відкриваємо справжній симулятор iOS, щоб перевірити сітку, яка працює на “справжньому” мобільному пристрої. Ми трохи боремось із пошуком правильного метатегу, але в кінцевому підсумку забираємо правильний CSS-Tricks.com. Це працює! Але, звичайно, у нас є деякі питання позиціонування, які нам доведеться вирішити. Для запису, цей мета-тег:
Ми майструємо майстерність майструємо з інтервалами та розмірами, поки все не виглядає нормально. До кінця все виглядає досить приємно!