Tout d'abord, pourquoi l'adaptation terminal mobile?
Design projet de concepteur général de la conception en fonction de la taille de 375, cependant, et maintenant le terminal mobile (le téléphone cellulaire) ère de la mise à jour rapide, chaque marque de téléphones ont une résolution différente physique, ce qui entraînerait, chaque dispositif la résolution logique ne sont pas les mêmes, cette fois-375 du projet de conception, si vous voulez restaurer est fondamentalement impossible, parce que si une disposition ou alors, si on les laisse écrire les morts, l'adaptation à droite, puis le côté droit de chaque dispositif démontré la taille du contenu pour faire varier, l'adaptateur terminal mobile est particulièrement important.
Quant à comprendre les vies passées, nous commençons par quelques concepts, d'abord sur une carte.
Taille de l'écran 1.1
Taille de l'écran est la longueur diagonale de l'écran pour mesurer les unités de mesure en pouces.
Deux diagonale comme indiqué dans cette taille de l'écran est
1.2 pixels
Nous voyons sur la carte appelée résolution 320x480, et ce que l'on appelle la résolution latérale disant que le blanc est de 320 pixels verticaux 480 pixels
1.2.1 Quels pixels il?
Pixels (Pel, pixel, pictureelement), la totalité de la luminance et de chrominance d'une image composée de l'unité d'image minimale. image de télévision est composé d'une luminosité constante par différents points d'image espacés, l'unité de formation d'image est un point de pixel, la plus petite unité d'une image est composée de pixels. L'explication est l'angle de la technologie informatique, le pixel est la plus petite unité de matériel et de logiciel peut contrôler. Elle implique que sur l'écran d'affichage de l'unité minimale, l'image n'est pas la plus petite unité. Une image contient typiquement des milliers de pixels, chaque pixel a ses propres informations de couleur, ils sont étroitement ensemble. Étant donné que l'œil humain l'illusion, ces pixels sont combinés en une image complète. Lors de la modification d'une région de l'image, il est en effet modifier la région de pixels. Ces modifications sont bons ou mauvais pixels détermineront la qualité de l'image finale. Plus le nombre de pixels par unité de surface, meilleur est l'effet de l'image. image de télévision en couleur est composée de milliers de pixels, et chaque pixel est composé de couleurs rouge, vert et bleu côte à côte. (Notez la taille de chaque pixel est pas fixe, il est déterminé en fonction de la résolution de l'appareil, des connaissances, de nouveau à l'essai)
1.2.2 Quelle est la résolution de celui-ci?
résolution de l'écran se rapporte au nombre de pixels dans la direction verticale et horizontale, l'appareil est px. réglage de la résolution de l'écran pour déterminer la quantité d'informations affichées sur l'écran d'ordinateur, pour mesurer les pixels horizontaux et verticaux. Sur le plan de l'écran de même taille, lorsque la résolution de l'écran est faible (par exemple 640 x 480), un pixel affiché sur un écran de petite taille, la taille de pixel individuel est relativement grande. Haute résolution de l'écran (par exemple 1600 x 1200), un pixel affiché sur l'écran multiple, la taille relativement petite d'un seul pixel.
Après avoir pris connaissance de ce qu'on appelle la résolution, certaines personnes se demanderont, je me souviens que le site officiel de pomme pomme pomme de la Résolution 6 est 750x1334 ah, mais la conception d'Apple projet de résolution est 375x667 ah 6, et la résolution de chaque dispositif de la résolution réelle est beaucoup plus petite, ce qui implique un certain nombre de raisons historiques
1.2.3 dispositif de résolution physique (pixels de dispositif)
Nous croyons que tous les développeurs frontaux, tous les témoins du processus de développement du téléphone mobile. À partir du téléphone écran bleu, le téléphone écran couleur, le Nokia développé téléphone à écran tactile, et l'étape puis le développement progressif des téléphones intelligents vers le bas nos mains de plus en plus clair, de plus en plus, donc nous sélectionnons le développement de plus en plus rapide.
A partir de l'écran initial granuleuse assez grand, puis à 720p 1080p, même maintenant que l'écran du téléphone phare 2k, notre résolution physique de l'original devient plus. Cette exposition d'un problème, si l'on double la résolution du téléphone, notre image ne va pas être réduit à deux, nous voulons le faire d'un projet de conception sur chaque dispositif, chaque dispositif de distinguer différents ah, en fait, votre préoccupation, Joe il y a plus de nos nombreuses années dans la pensée. Ceci est notre résolution logique
1.2.4 Logic Résolution (dispositif de pixel indépendant)
Comme indiqué ci-dessous, bien que le dispositif est résolution physiquement différente, mais il est presque rien, mais la résolution logique, qui serait le plus proche Joe grâce.
Offres d'emploi sur la conférence iPhone4 d'abord proposé le concept Retina Display (écran de la rétine), et dans la rétine écran iPhone4 utilisé dans le pixel 2x2 lorsqu'un pixel à utiliser, donc rendre plus raffiné l'apparence de l'écran, mais la taille de l'élément, mais il ne changera pas. Dès lors, des dispositifs à haute résolution, une pluralité de pixels logique. Ces dispositifs de différence de pixel logique, mais pas une grande portée, mais encore un peu différents, ils ont donné naissance à la page de fin mobile nécessite une adaptation à ce problème, étant donné que le pixel logique est composé de pixels physiques viennent, ils auront un rapport de pixels.
1.2.5 rapport de pixels de dispositif
Dispositif bit de pixel périphérique rapport de pixel visé dpr, à savoir les pixels individuels du pixel et le rapport de dispositifs physiques. Pourquoi devrions-nous connaître le rapport de pixels de l'appareil? Parce que ce rapport de pixel produira une question très classique, frontière de pixel Question 1.
1px questions frontalières
Quand nous écrivons l'1px css, car il est un pixel logique, ce qui dans notre pixel logique en fonction du rapport de pixels de l'appareil (DPR) à mapper sur l'appareil, il est 2px ou 3px, parce que la taille de l'écran de chaque appareil est pas le même , a conduit à chaque taille de pixel physique rendu différent (vous vous rappelez la connaissance ci-dessus, la taille des pixels de l'appareil est fixé), de sorte que si la taille relativement importante de l'équipement, 1px regard rendu assez minerai grossier c'est le problème classique d'une frontière de pixel.
Comment résoudre
L'idée de base est que dans le web, le navigateur nous fournit window.devicePixelRatio pour nous aider à DPR. En css, vous pouvez utiliser des requêtes min-device-pixel ratio médias, distinction DPR: D'après ce que nous pixels, calcule qu'il devrait avoir une taille correspondant, mais une très grande exposition à des problèmes de compatibilité.
Caractérisé en ce que dans un arrondi 0.5px Chrome 1px, alors que pixel firefox / safari moitié côté peut être dessiné, et comme Chrome 0.5px moins de 0, mais pas moins de 0.55px comme Firefox 1px, Safari est de ne pas moins de 0.75px comme 1px, observation plus d'iOS Chrome se basera sur le côté téléphone 0.5px et Android (5.0) navigateur natif ne fonctionne pas. Ainsi, directement 0.5px différents navigateurs sont de grandes différences, et nous voyons des systèmes différents de différents navigateurs ont un traitement différent du px point décimal. Donc, si l'on met l'appareil est d'inclure une px décimale large plus, en fait, moins fiables, car les différents navigateurs se comportent différemment.
Quant à l'autre frontière de pixels pour résoudre un tas de problèmes réponses en ligne, ici je vous recommande un très facile à utiliser, et aucune solution d'effets secondaires.
transformer: échelle (0,5) Schéma
div {
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
} Après support css dispositif requête basée sur une solution de rapport de pixels
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
} Ainsi, la solution idéale au problème d'un gros pixels à regarder.
Supplément extensions
CSS dernière spécification prévoit de mettre en œuvre une frontière de pixel par propriété standard, est obtenue en ajoutant un attribut mot-clé à l'attribut border-width racine des cheveux, comme suit des liens [1]. La raison est appelée racine des cheveux, juste parce qu'une frontière de pixels cheveux soyeux.
Lorsque la pratique en utilisant le programme, mais aussi beaucoup d'attention aux derniers développements ans.
En second lieu, comment adapter
2.1 viewport
Fenêtre (la fenêtre) des images de synthèse représentant la région visible en cours. Dans la terminologie du navigateur Web, généralement la même fenêtre du navigateur, mais il ne comprend pas l'interface utilisateur du navigateur, barre de menus, etc. - qui fait référence à une partie du document que vous parcourez.
Comment configurer la fenêtre à la fin mobile, il? Il suffit d'une balise meta peut être!
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"> Ils sont ce que le sens de celui-ci?
Nous terminons pour déplacer la fenêtre en bons effets visuels et de l'expérience, nous devons être la largeur viewport aussi proche de fenêtre idéale.
Idéal viewport: En général, la fenêtre est en fait pas vraiment exister, il est un dispositif idéal pour la taille de la fenêtre mise en page, si l'utilisateur ne fonctionne pas mise à l'échelle manuelle peut être idéalement affichage de la page. idéal que l'on appelle la largeur est le navigateur (écran) de la largeur.
Ainsi, les paramètres de méta ci-dessus, est notre cadre idéal, il définit notre largeur de la fenêtre de la largeur de l'écran, à l'échelle initiale de 1, qui est, lorsque notre fenêtre visuelle initiale est la fenêtre idéale!
Ce qui est réglé sur aucun terminal mobile évolutif utilisateur peut résoudre l'événement click problème de retard (développer)
2.2 Méthode d'adaptation
2.2.1 adaptation de rem
rem est une unité de CSS3 relativement nouveau, cette unité a attiré une grande attention. Cette unité avec em Quelle est la différence? La différence est que lorsque vous utilisez rem définir la taille de la police pour l'élément est toujours la taille relative, mais juste l'élément racine HTML opposé. Cet appareil peut être dit pour définir les mérites relatifs de la taille absolue et la taille dans l'une, les deux peuvent se faire que par la modification de l'élément racine de proportion pour ajuster la taille de police, et la couche de la taille de police par couche pour éviter une réaction en chaîne complexe. À l'heure actuelle, en plus IE8 et plus tôt, tous les navigateurs ont un soutien réel. Pour les navigateurs ne supportent pas, notre approche est très simple, est d'écrire une déclaration d'unités absolues. Ces navigateurs ignoreront rem définir la taille de la police.
Par exemple:
//假设我给根元素的大小设置为14px
html{
font-size：14px
}
//p标签如果想要也是14像素
p{
font-size:1rem
}
mise en page de rem, vous devez mentionner solution flexible, flexible est une open source mobile après une des solutions écourtées Ali d'adaptation, citant souple, nous utilisons unifié in rem à la mise en page.
Ses principes sont simples.
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit(); rem est le nœud html Taille du texte par rapport à faire les calculs. Par conséquent, si la première page quand une taille de police est fournie à l'élément racine, l'élément suivant à être disposé selon rem, de manière à assurer les changements de taille de page, la mise en page peut être adaptativement.
Nous devons donc donner le projet de conception px convertis en unités correspondant peut être rem.
Bien sûr, ce programme est tout simplement un programme de transition, pourquoi le programme de transition
Depuis lors, viewport également compatible avec la version inférieure des problèmes d'équipement Andrew et vw, vh pas été en mesure d'atteindre tous les navigateurs compatibles, programme si flexible avec rem à Vmin Simuler être mis en œuvre dans différents dispositifs échelle géométrique du programme « excessif », le de sorte que le programme est excessif, parce que cela est de le juger selon ce dispositif, la taille d'un programme de page est basée sur la taille de l'écran à un projet de conception de réduction de cent pour cent, de sorte que les gens voient la taille de l'effet est le même, mais Apple et Apple 6p bien 5 voir la réduction du projet de conception est le même, mais il a vu à un effet de distance convenable peut être la même chose que vous, en substance, un utilisateur avec un écran plus grand, veulent voir plus de contenu, plutôt qu'un grand mot .
ainsi, par mise à l'échelle pour résoudre ce problème est un programme de transition, destiné à être éliminé par le temps.
2.2.2 vw, mise en page vh
vh, programme vw peu window.innerWidth largeur visuelle de la fenêtre et la hauteur de la fenêtre d'affichage visuel window.innerHeight divisé en 100 parties.
vw et des programmes similaires et rem vh est tout à fait gênant de faire des conversions d'unités, et convertir px à Vw ne pas être en mesure de bien divisible, donc il y a une certaine différence de pixel.
Mais dans l'ingénierie d'aujourd'hui, webpack analyse lors de l'utilisation postcss css-chargeur a une postcss-px à viewport peut convertir automatiquement px au vw
{
loader: 'postcss-loader',
options: {
plugins: ()=>[
require('autoprefixer')({
browsers: ['last 5 versions']
}),
require('postcss-px-to-viewport')({
viewportWidth: 375, //视口宽度（数字)
viewportHeight: 1334, //视口高度（数字）
unitPrecision: 3, //设置的保留小数位数（数字）
viewportUnit: 'vw', //设置要转换的单位（字符串）
selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名（数组）
minPixelValue: 1, //设置要替换的最小像素值（数字）
mediaQuery: false //允许在媒体查询中转换px（true/false）
})
]
} 2.2.3 px principalement, vx et vxxx (vw / vh / Vmax / Vmin), complété par un certain nombre de flex (recommandé)
Recommander l'utilisation du programme tel, parce que nous allons considérer les besoins des utilisateurs, les utilisateurs raison d'acheter un téléphone à grand écran, ne pas voir les plus grands mots, mais pour voir plus de contenu, directement px il est la solution la plus sensible, l'utilisation vw, des moyens de rem et d'autres disposition compréhensible, mais, flex ces dispositions élastiques populaires aujourd'hui, si si elle est avec cette pensée traditionnelle penser clairement sur le problème pour deux raisons (px pensent est le plus bien, il peut y avoir grand frère, vous pouvez vw, ou rem écriture mise en page sophistiquée, ne peut pas dire).
- Pour être paresseux, pas disposé à faire pour chaque adaptateur de téléphone
- Je ne veux pas apprendre une nouvelle mise en page, de sorte que la mise en page et d'autres vous passent par-Flex
Le terminal mobile adapté pour traiter 2,3
1 est prévu dans la largeur de la tête = dispositif de largeur de la fenêtre '
2. Utilisation de px dans le css
3. La mise en page flex scénarios appropriés, ou avec vw adaptatif
4. (PC <-> Téléphone <-> comprimé) lorsque le type de requêtes de médias multi-appareils
5. Si l'interaction entre les différents types de périphériques sont trop différentes circonstances, être considéré séparément du développement du projet
Résumé:
Un ensemble de règles standard sont généralement beaucoup de développement hybride est adapté, mais similaire.
