frontend-responsive
Создание адаптивных макетов для мобильных устройств
Também disponível em: DevanB
Создание адаптивных веб-макетов, которые работают на всех устройствах, является сложной и подверженной ошибкам задачей. Этот навык предоставляет Клоду четкие рекомендации по принципам дизайна для мобильных устройств, жидким контейнерам, относительным единицам измерения и удобным для касания взаимодействиям, чтобы ваши веб-проекты плавно масштабировались с мобильных устройств до настольных компьютеров.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "frontend-responsive". Создайте адаптивный компонент карточки, который располагается вертикально на мобильных устройствах и горизонтально на настольных компьютерах
Resultado esperado:
- Мобильный подход: начните с вертикального расположения для маленьких экранов
- Используйте flexbox или grid для горизонтального расположения на настольных компьютерах
- Добавьте контрольную точку около 768px для планшетов и выше
- Обеспечьте минимальный размер зон касания 44px для кнопок
- Используйте единицы rem для отступов, которые масштабируются с базовым шрифтом
A utilizar "frontend-responsive". Сделайте так, чтобы мое навигационное меню хорошо работало на мобильных устройствах
Resultado esperado:
- Используйте паттерн гамбургер-меню для мобильных устройств с выпадающим списком на всю ширину
- Примените минимальную высоту 44px для зон касания
- Рассмотрите липкий заголовок для удобного доступа на мобильных устройствах
- Используйте flexbox для горизонтального меню на контрольных точках настольных компьютеров
A utilizar "frontend-responsive". Какие единицы измерения следует использовать для адаптивной системы типографики
Resultado esperado:
- Используйте rem для размеров шрифтов, чтобы уважать настройки браузера пользователя
- Используйте em для отступов, специфичных для компонентов внутри виджетов
- Используйте vw для заголовков, которые масштабируются с шириной экрана
- Избегайте px для размеров шрифтов для поддержки настроек доступности
Auditoria de Segurança
SeguroThis is a pure documentation skill containing only guidance about frontend responsive design standards. No executable code, network calls, file system access, or command execution capabilities are present. All 58 static findings are false positives triggered by keyword matching on benign documentation text.
Fatores de risco
🌐 Acesso à rede (1)
📁 Acesso ao sistema de arquivos (4)
Pontuação de qualidade
O Que Você Pode Construir
Создание адаптивных веб-интерфейсов
Создание макетов, которые плавно адаптируются от мобильных телефонов до настольных экранов с использованием современных техник CSS
Реализация дизайна для мобильных устройств
Превращение дизайн-макетов в адаптивный код с правильными контрольными точками и удобными для касания взаимодействиями
Оптимизация кросс-устройствых体验
Обеспечение того, чтобы веб-приложения обеспечивали согласованный опыт на всех размерах экрана и типах устройств
Tente Estes Prompts
Помогите мне создать адаптивный контейнер для моей веб-страницы, который работает на мобильных устройствах, планшетах и настольных компьютерах с использованием подхода для мобильных устройств.
Какие стандартные контрольные точки я должен использовать для адаптивного дизайна с мобильных устройств? Покажите, как реализовать их в CSS.
Когда следует использовать rem, em, px или vw/vh для размеров в адаптивных макетах? Дайте мне практические примеры для каждого.
Как убедиться, что мои кнопки и интерактивные элементы удобны для касания на мобильных устройствах? Каковы минимальные требования к размерам?
Melhores Práticas
- Начинайте со стилей для мобильных устройств и используйте медиа-запросы min-width для постепенного улучшения на больших экранах
- Используйте относительные единицы (rem, em) для типографики и отступов для поддержки предпочтений пользователя по масштабированию
- Тестируйте на реальных устройствах или надежных эмуляторах, а не только на инструментах изменения размера браузера
Evitar
- Избегайте проектирования сначала для настольных компьютеров и попыток упрощения для мобильных устройств - это часто приводит к плохому мобильному опыту
- Не используйте фиксированные пиксельные ширины для контейнеров - используйте max-width с процентными или единицами viewport
- Избегайте скрытия контента на мобильных устройствах без предоставления альтернативного доступа - рассмотрите стратегии приоритизации контента