mise en page	adresse
Disposition des flux de développement WEB mobile	[HTML+CSS] Mise en page du flux du blog de développement WEB mobile_ddddddyu - Blog CSDN
Mise en page flexible pour le développement Web mobile	[HTML+CSS] Mise en page flexible pour le développement WEB mobile_Blog de ddddddyu - Blog CSDN
Mise en page Rem du développement WEB mobile	[HTML+CSS] rem layout of mobile WEB development_ddddddyu's blog-CSDN blog
Mise en page responsive du développement WEB mobile	[HTML+CSS] Mise en page réactive du blog de développement Web mobile_ddddddyu - Blog CSDN

1 Principes de base du terminal mobile

Navigateurs PC courants et navigateurs mobiles

Le cœur des navigateurs mobiles nationaux est essentiellement Webkit

Le terminal mobile est principalement développé pour le terminal mobile

Maintenant, la fragmentation du terminal mobile est grave, la résolution et la taille de l'écran sont différentes, nous nous concentrons uniquement sur le px

2 fenêtres

La fenêtre d'affichage est la zone de l'écran où le navigateur affiche le contenu de la page. Les fenêtres peuvent être divisées en fenêtres de disposition, fenêtres visuelles et fenêtres idéales

Nous nous concentrons uniquement sur la fenêtre d'affichage idéale

2.1 fenêtre de présentation fenêtre de présentation

Généralement, les navigateurs des appareils mobiles ont une fenêtre de mise en page définie par défaut, qui est utilisée pour résoudre le problème d'affichage des premières pages côté PC sur les téléphones mobiles.
iOS et Android définissent essentiellement la résolution de la fenêtre d'affichage sur 980px, de sorte que la plupart des pages Web sur le PC peuvent être rendues sur le téléphone mobile, mais les éléments semblent petits et généralement la page Web peut être agrandie manuellement par défaut.

2.2 fenêtre visuelle fenêtre visuelle

Littéralement, c'est la zone du site Web que l'utilisateur voit. Remarque : est la zone du site Web
Nous pouvons manipuler la fenêtre visuelle en zoomant, mais cela n'affectera pas la fenêtre de mise en page, et la fenêtre de mise en page conservera toujours la largeur d'origine

2.3 vue idéale vue idéale

Pour faire simple, le site Web s'adapte à la taille de l'écran du téléphone mobile et le navigateur est notifié avec méta pour le réaliser.
L'objectif principal de la balise meta viewport : la largeur de la fenêtre d'affichage de la mise en page doit être cohérente avec la largeur de la fenêtre d'affichage idéale. La compréhension simple est que la largeur de l'appareil correspond à la largeur de la fenêtre d'affichage de notre mise en page.

2.4 balise meta viewport

 <meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">

Les attributs	expliquer
largeur	Width définit la largeur de la fenêtre d'affichage, vous pouvez définir la valeur spéciale de device-width
échelle initiale	Taux de zoom initial, un nombre supérieur à 0
échelle maximale	Le taux de zoom maximal, un nombre supérieur à 0
échelle minimale	Le taux de zoom minimum, un nombre supérieur à 0
évolutif pour l'utilisateur	Si l'utilisateur peut zoomer, oui ou non (1 ou 0)

2.5 Paramètres de fenêtre standard

La largeur de la fenêtre est cohérente avec l'appareil : width=device-width
Le taux de zoom par défaut de la fenêtre est de 1,0 : initial-scale=1,0
Ne pas autoriser les utilisateurs à évoluer eux-mêmes : user-scalable=no
Mise à l'échelle maximale autorisée 1.0 : échelle-maximale=1.0
Le facteur d'échelle minimum autorisé est de 1,0 : minimum-scale=1,0

2.6 Résumé

La fenêtre d'affichage est la zone de l'écran où le navigateur affiche le contenu de la page.
Les fenêtres sont divisées en fenêtre de mise en page, fenêtre visuelle et fenêtre idéale
Ce que nous voulons pour la mise en page mobile est une vue idéale (c'est-à-dire la largeur de l'écran du téléphone mobile, la largeur de notre fenêtre de mise en page)
Pour une fenêtre d'affichage idéale, nous devons ajouter une balise méta de fenêtre d'affichage à notre page mobile

3 images doubles

3.1 Pixel physique et rapport de pixels physiques

Les pixels physiques font référence aux plus petites particules affichées à l'écran, qui sont physiquement réelles. Ceci est défini par le fabricant en quittant l'usine, par exemple, Apple 6\7\8 est 750*1334
1px quand on développe n'est pas forcément égal à 1 pixel physique
Sur la page côté PC, 1 px est égal à 1 pixel physique, mais côté mobile c'est différent
Le nombre de pixels physiques pouvant être affichés dans un px est appelé rapport de pixels physiques ou rapport de pixels d'écran
Écrans de PC et de téléphones mobiles antérieurs/écrans de téléphones mobiles ordinaires : 1 pixel CSS = 1 pixel physique, et le ratio de pixels physiques est de 1. Le terminal mobile est différent, par exemple, le rapport de pixels physiques de l'iphone6/7/8 est de 2.
Retina (écran rétine) est une technologie d'affichage qui peut compresser plus de pixels physiques sur un seul écran, obtenant ainsi une résolution plus élevée et améliorant la finesse de l'affichage à l'écran.

Pour le dire simplement, un pixel px contient deux pixels physiques, donc l'image préparée ne sera pas floue si le px est le double de l'original

3.2 Graphique double

L'image préparée est 2 fois plus grande que la taille réelle, qui est la double image

3.3 Solution de graphe double

Nous avons besoin d'une image de 50*50 pixels (pixels CSS), qui sera agrandie de 2 fois et 100*100 sera floue si elle est directement placée dans l'iphone8.
Ce que nous prenons, c'est de mettre une image 100*100 puis de réduire manuellement l'image à 50*50 (css pixels)
L'image que nous avons préparée est 2 fois plus grande que la taille dont nous avons réellement besoin, et c'est la façon de doubler l'image

3.4 Mise à l'échelle de l'arrière-plan background-size

L'attribut background-size spécifie la taille de l'image d'arrière-plan

background-size: 背景图片宽度 背景图片高度；

Unité : longueur|pourcentage|couverture|contient
cover agrandit l'image d'arrière-plan pour qu'elle soit suffisamment grande pour que l'image d'arrière-plan recouvre complètement la zone d'arrière-plan
contenir étend l'image à sa taille maximale afin que sa largeur et sa hauteur s'intègrent parfaitement dans la zone de contenu

5 solutions technologiques mobiles

Créez séparément des pages mobiles (Jingdong, tb), les pages réactives sont compatibles avec les terminaux mobiles (Samsung)

Nous pouvons utiliser en toute sécurité les styles H5 et CSS3 dans les navigateurs mobiles

En même temps, nous n'avons qu'à envisager d'ajouter webkit au préfixe privé de notre navigateur.

5.1 Initialisation CSS

Il est recommandé d'utiliser normalize.css pour l'initialisation mobile.Site officiel : Normalize.css : permet aux navigateurs d'afficher tous les éléments de manière plus cohérente .

5.2 Dimensionnement de la boîte du modèle de boîte CSS3

Calcul traditionnel de la largeur du modèle de boîte : largeur de la boîte = largeur + bordure + rembourrage défini dans CSS
Modèle de boîte traditionnel CSS3 : largeur de la boîte = largeur définie dans CSS (y compris bordure + rembourrage).
En d'autres termes, le rembourrage et la bordure du modèle de boîte CSS3 ne prendront plus en charge la grande boîte

/* CSS3盒子模型 */
box-sizing: border-box;
/* 传统盒子模型 */
box-sizing: content-box;

Optez pour le modèle de box CSS3 côté mobile

Choisissez traditionnel côté PC et choisissez CSS3 quelle que soit la compatibilité

5.3 Styles spéciaux

/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮需要清除，设置为 transparent 完全透明 */
-webkit-tap-highlight-color: transparent;
/* 在移动端默认外观在ios上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时弹出的菜单 */
img, a {-webkit-touch-callout: none;}

6 Dispositions courantes sur les terminaux mobiles

6.1 Créer une page séparée

Disposition de flux (disposition en pourcentage)
disposition flex élastique (fortement recommandé)
moins + rem + mise en page de la requête multimédia
mise en page mixte

6.2 Compatibilité des pages responsives

requête média
amorcer

7 Disposition de flux (disposition en pourcentage)

Définissez la largeur de la boîte sur un pourcentage à l'échelle en fonction de la largeur de l'écran, non limité par des pixels fixes, et le contenu se remplit des deux côtés

max-width largeur maximale (max-height hauteur maximale)
min-width largeur minimale (min-height hauteur minimale)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }
        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: pink;
        }
        
        section div:nth-child(2) {
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>

Pratique de la double image

Dans Firework, la sprite map est réduite à la moitié de l'original
Mesurez ensuite les coordonnées en fonction de la taille (puis mesurez les coordonnées x et y)
Notez que le code background-size doit également être écrit : la moitié de la largeur d'origine de la sprite map

background: url(../images/jd-sprites.png) no-repeat -81px 0;
/* 原始图大小为400px左右 */
background-size: 200px auto;

[HTML+CSS] Disposition en flux du développement WEB mobile