Tutoriel vidéo de mise en page WEB mobile

"Tutoriel vidéo sur la mise en page WEB mobile" présente les bases du développement Web mobile, la composition et la mise en page efficaces, les problèmes courants du Web mobile, l'interaction tactile du terminal, comment résoudre divers bugs, etc. En ce qui concerne le côté mobile, nous devons mentionner la question de l'adaptation. Les appareils mobiles de toutes tailles rendent non seulement difficile la création d'Android et d'iOS, mais en raison des différences de taille des appareils et des navigateurs, le front-end est désormais difficile. Cependant, la méthode est toujours meilleure que les problèmes. Nous sommes une équipe révolutionnaire et nous devons agir lorsque nous rencontrons des problèmes.

Adresse de lecture du cours : http://www.php.cn/course/428.html

Le style d'enseignement du professeur :

Les cours du professeur sont vivants, pleins d'esprit, pleins d'esprit et touchants. Une métaphore vivante est comme la touche finale, ouvrant la porte à la sagesse aux étudiants ; un humour bien placé apporte un sourire entendu aux étudiants, comme boire un verre de vin moelleux, donnant aux gens un arrière-goût et une nostalgie des aphorismes d'un philosophe, des références culturelles ; sont intercalés de temps en temps dans la narration, donnant aux gens réflexion et vigilance.

Le point le plus difficile de cette vidéo est le traitement de style particulier du web mobile :

Le problème des images haute définition

La haute définition Les images de définition ne sont pas les mêmes que celles des films que nous téléchargeons habituellement. Les images haute définition sont différentes. Le concept des images haute définition sur le Web mobile est que ma photo est aussi grande que la mienne et a tellement de clarté que nous devrions l'afficher. si clairement sur les appareils mobiles. Alors pourquoi y a-t-il une ambiguïté ? Si une image mesure 100 px * 100 px, nous l'afficherons en 100 px * 100 px sur l'appareil mobile. Il n'y a aucun problème si vous y réfléchissez.

Mais réfléchissons-y, sur l'écran Retina, un px est égal à deux dp, donc si vous utilisez 100px*100px, vous utilisez en fait 200dp * 200dp pixels physiques pour le rendu, et l'image sera agrandi et flou.

Lors du rendu des images sur des pages Web mobiles, afin d'éviter le flou de l'image, la largeur et la hauteur de l'image doivent être rendues en unités de pixels physiques, c'est-à-dire pour une image 100*100, 100dp* 100dp doit être utilisé.

width:(w_value/dpr) px; 
height:(h_value/dpr) px;

Pour parler franchement, sur un écran haute définition, si l'image est de 100*100, alors nous devrions utiliser 50*50 px pour le rendu si le dpr est supérieur à 2 à ce moment. sous iPhone6 ​​​​Plus, nous devrions alors le diviser par son dpr(3).

Ici, nous vous recommandons également de télécharger les ressources du code source : http://www.php.cn/xiazai/code/2051

Ce didacticiel vidéo est partagé avec tout le monde :

1. Tutoriel vidéo de mise en page WEB mobile

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!