Comment tester la conception de la conception Web réactive Compatibilité des navigateurs

Points clés de la conception Web réactive (RWD)

La conception Web réactive (RWD) est essentielle pour s'assurer que le site Web est accessible et convivial sur les appareils de différentes tailles d'écran. Il a été proposé par Ethan Marcotte en 2010, permettant à un seul site Web de fonctionner correctement sur n'importe quel appareil, quelle que soit la taille de l'écran ou la taille de la fenêtre.

RWD utilise une variété de techniques et de méthodes, notamment des balises META de la fenêtre HTML, des requêtes multimédias, des unités de vision CSS, des colonnes CSS, des options CSS Flexbox et Grid et JavaScript RWD. Tout cela a un bon support de navigateur, avec la grille CSS actuellement prise en charge par près de 95% des navigateurs couramment utilisés.

Les tests de test RWD et cross-navigateur sont essentiels et peuvent être effectués avec des tests de navigateur, un simulateur de système d'exploitation mobile, des services de test en ligne et des tests d'appareils réels. Cependant, chaque méthode a ses propres limites et doit être utilisée en combinaison pour obtenir les résultats les plus précis.

Les services de test en ligne (tels que Lambdatest) permettent aux utilisateurs de tester des pages réactives sur les navigateurs mobiles sur le Web. Ces services peuvent également inclure des API de test automatisées pour vérifier la régression du style ou les interfaces utilisateur corrompues.

Le test de périphérique réel est le moyen le plus précis de tester la RWD car il permet d'évaluer les vitesses de traitement réelles, les commandes tactiles et la conception globale. Il est recommandé de tester autant de dispositifs que possible, en particulier des appareils généraux qui ont été utilisés depuis un ou deux ans.

Comment travailler dans RWD

Il n'y a pas de méthode ou de technique RWD unique.

Tout d'abord, vous devez déterminer comment la conception du site Web réagira aux moniteurs de différentes tailles. Ceci est un défi, avec de nombreux sites Web RWD précoces prenant une disposition de bureau existante et supprimant une partie du contenu avec une taille d'écran réduite.

Une meilleure technologie est "Mobile First". Il commence par une vue mobile linéaire qui s'exécute sur tous les appareils, puis réorganise ou modifie le contenu lorsque plus d'espace et de fonctionnalités de navigateur pris en charge sont disponibles. Récemment, de nombreux sites Web ont adopté des dispositions plus simples, où les expériences mobiles et de bureau sont pour la plupart similaires.

Un exemple typique de RWD est le menu du hamburger. Les utilisateurs sur des écrans plus petits peuvent cliquer sur l'icône pour afficher les liens de navigation, tandis que les utilisateurs sur des écrans plus grands peuvent voir toutes les options de la liste horizontale.

Les sections suivantes offrent certaines options de mise en œuvre techniques.

HTML Version Meta Tag

quelle que soit la technologie RWD utilisée, les balises suivantes doivent être définies dans HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

Les paramètres

width=device-width s'assurent que le navigateur mobile évolue les pixels CSS logiques à la largeur de l'écran. Sans ce paramètre, le navigateur suppose qu'il rend le site Web de bureau et la mise à l'échelle en conséquence afin qu'il puisse se cacher et évoluer.

Requête médiatique

La requête médiatique était la base principale des premiers sites Web RWD. Ils permettent à CSS de cibler une gamme spécifique de tailles de fenêtre. Par exemple:

<meta name="viewport" content="width=device-width, initial-scale=1">

Les requêtes multimédias sont toujours utilisées, bien que des options moins explicites soient maintenant disponibles.

<picture></picture> élément

html <picture></picture> Les éléments utilisent la syntaxe de requête multimédia pour contrôler plusieurs <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173915575374245.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Test Responsive Web Design Cross-Browser Compatibility ">

Unité de la fenêtre CSS

Les unités CSS vw et vh représentent 1% de la largeur et de la hauteur de la fenêtre, respectivement. vmin est 1% de la taille minimale et vmax est de 1% de la taille maximale.

Ceux-ci permettent une flexibilité RWD, en particulier lorsqu'ils sont utilisés en conjonction avec calc. Par exemple:

/* 应用于所有视图的样式 */
p {
  font-size: 1rem;
}

/* 应用于宽度介于 900px 和 1200px 之间的视口的样式 */
@media (min-width: 900px) and (max-width: 1200px) {
  p {
    font-size: 1.5rem;
  }
}

Colonne CSS

La disposition multi-colonnes CSS fournit un moyen de créer plusieurs colonnes de texte à mesure que la taille du conteneur augmente. Par exemple:

/* 字号随视口宽度增加而增加 */
p {
  font-size: 1rem + 0.5vw;
}

CSS Flexbox et Grid

CSS Flexbox et CSS Grid fournissent une technologie moderne pour disposer des éléments enfants en fonction de leur contenu et de leur espace disponible. La principale différence est:

• Flexbox est utilisé pour la disposition unidimensionnelle. Les éléments peuvent être cassés (ou non) au besoin, de sorte que les colonnes peuvent ne pas être alignées.
La grille
• est utilisée dans des dispositions bidimensionnelles et a généralement des lignes et des colonnes reconnaissables.

Les deux peuvent être utilisés pour créer des "dispositions intrinsèques" (une terminologie inventée par Jen Simmons). Essentiellement, la taille de l'élément est déterminée en fonction de la taille de la fenêtre, sans requêtes multimédias. Par exemple:

/*
列的最小宽度必须为 12rem
每个列之间有 2rem 的间隙
*/
.container {
  columns: 12rem auto;
  column-gap: 2rem;
}

Options RWD JavaScript

JavaScript peut également être utilisé pour déterminer la taille de la fenêtre et réagir en conséquence. Par exemple:

/*
子元素将至少为 20rem 并填充行。
小于 20rem 的显示将子元素大小调整为 1fr
(可用宽度的 100%)。

1rem 的间隙将始终围绕元素。
*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
}

De même, la taille d'un seul élément peut être vérifiée à l'aide de offsetWidth et offsetHeight, bien que la méthode getBoundingClientRect() puisse retourner plus d'informations, y compris la partie décimale du pixel:

// 获取视口宽度和高度
const vw = window.innerWidth, vh = window.innerHeight;

Lorsque le périphérique tourne ou que la fenêtre du navigateur est redimensionnée, la taille de la fenêtre et de l'élément peut changer. matchMedia L'API peut analyser les requêtes multimédias CSS et les modifications de déclenchement:

const element = document.getElementById('myelement'),
      rect = element.getBoundingClientRect(),
      ew = rect.width,
      eh = rect.height;

Prise en charge du navigateur

Les technologies RWD ci-dessus ont toutes une bonne prise en charge du navigateur. La dernière option - CSS Grid - est actuellement prise en charge par près de 95% des navigateurs couramment utilisés. Cependant, il est toujours nécessaire de tester votre site Web sur une variété d'appareils, de résolutions et de navigateurs ...

(Le contenu suivant est limité par l'espace, seul le contour est conservé. Veuillez vous référer au texte d'origine pour un contenu spécifique)

• Test de navigateur inédial
• Emulator du système d'exploitation mobile
• Service de test en ligne (lambdatest, etc.)
• Test de l'équipement réel
• Un site Web, plusieurs vues
• FAQ sur la conception Web réactive et la compatibilité du croisement

Cette sortie révisée maintient la signification d'origine tout en paraphrasant les phrases et en utilisant des synonymes pour atteindre la pseudo-originalité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!