javascript - Obtenez l'image PSD de l'art/UI, puis écrivez l'ordre de la page frontale, veuillez me donner des conseils.

Question

Le psd que j'ai reçu a une résolution de 750*1334, ce qui devrait être la résolution de l'iPhone6. Alors, mon simulateur Chrome sera-t-il réglé sur l'iPhone6 ​​​​à ce moment-là ? Si c'est le cas, alors
"Question 1" est ici. La résolution de mon ordinateur est de 1366*768. Si Chrome simule l'iPhone 6, il sera mis à l'échelle, ce qui affecte l'effet des pages Web. Je le règle généralement sur l'iPhone 5, afin que la page mobile puisse être affichée sans mise à l'échelle, ainsi que les polices. ne sera pas flou en raison de la mise à l’échelle. Donc, si vous le réglez sur iphone5 pour créer le psd de l'iphone6, ce ne sera certainement pas exactement le même (la taille de l'icône sera certainement plus petite que le psd). Plus tard,
"Question 2", j'ai défini la taille de la police HTML sous différentes résolutions pour qu'elle soit différente. Tous les CSS impliquant la longueur, la largeur et la hauteur de ligne utilisent des unités rem au lieu de px et em. se débrouille à peine sur les téléphones mobiles avec différentes résolutions, mais cela ne peut pas être complètement identique au psd. Donc, j'étais à nouveau confus.
"Question 3", le psd iPhone donné par l'artiste, certaines pages marqueront la longueur de l'élément px, et d'autres non, alors je suis très étrange, dois-je régler le simulateur Chrome sur iPhone6 ​​​​et ensuite le faire au niveau des pixels avec le psd ? 0 déviation ? Quant aux pages sous la résolution de l'iPhone5 et de l'iPhone6plus, dois-je utiliser @media pour les écrire séparément ? C'est tellement fatigant ! ! Dans le passé, la version PC pouvait atteindre un écart de 0 pixel, mais la version mobile semblait impuissante !
"Question 4" Parfois, il y a 5 dossiers dans le PSD reçu, comme drawable-xxhdpi, qui sont en fait des icônes à différentes résolutions. J'utilise habituellement l'icône dans le plus grand dossier. Alors, est-ce de la paresse ? Doit-il être adapté aux téléphones mobiles avec différentes résolutions et @media utiliser des icônes de différentes tailles Si oui, ne serait-ce pas encore plus écrasant pour moi ?

--------------------------------Ligne de séparation------------------- -----------------------

En fait, après avoir parlé si longtemps, je ne sais toujours pas comment créer une page mobile. Comment la réaliser ? Y a-t-il un tutoriel ou quelque chose comme ça ? J'ai adapté la page sous iPhone 5 pour qu'elle soit à peu près la même. Du coup, l'artiste demandera pourquoi l'iPhone 6 plus est si différent des éléments psd (comme la distance, je suis le seul à avoir la partie avant). et l'artiste ne comprend pas le front-end. Je n'ose pas poster sur Zhihu, comme dans la réponse Il y a des centaines de lignes de texte à chaque tour, ce qui fait peur. Tout le monde, s'il vous plaît, donnez-moi quelques conseils.

Answer 1

Première : lorsque vous dites que l'iPhone 6 effectuera un zoom, voulez-vous dire que lorsque Chrome est activé en mode mobile pour le débogage, la disposition inférieure de l'iPhone 6 n'est pas visible ? Si tel est le cas, vous pouvez réduire les 100 % à 75 %, et il sera affiché dans son ensemble sans voir clairement la police. Comme le montre l'image :

Deuxièmement : lors de la mise en page mobile, il est recommandé d'utiliser flexible.js. Vous pouvez le rechercher vous-même sur Baidu. Il s'agit d'un plug-in pour Taobao mobile. Vous pouvez le présenter directement sur Internet. js. Lors de la mise en page, rem fait généralement référence à 75px. Il suffit de le définir en fonction de data-dpr. Habituellement, trois paramètres doivent être définis, un lorsqu'il est 1, un lorsqu'il est 2 et un lorsqu'il est 2. est 3. Par conséquent, la taille de la police sur le terminal mobile doit être aussi cohérente que possible. Il est préférable de garder les balises que vous utilisez cohérentes, et la charge de travail sera bien moindre.

Troisièmement : Personnellement, je ne pense pas qu'il soit nécessaire d'avoir une différence de 0 pixel, car la charge de travail est vraiment énorme, tant que la plage de distance maintenue par chaque interface est visuellement la même, donc votre distance, etc. doit également l'être. rem mise en page, et l'erreur ne sera pas trop grande.

Quatrièmement : j'ai l'habitude d'utiliser la plus grande. Si cela ne vous dérange pas ou si l'entreprise en a besoin, vous pouvez utiliser chaque icône. Si ce n'est pas nécessaire, choisissez simplement la plus grande, et elle sera claire sur l'écran. grand écran affiché.

La mise en page mobile peut rencontrer de nombreux problèmes d'adaptation et le débogage de Chrome peut ne pas être précis. L'affichage de l'ordinateur est normal et il peut y avoir d'autres problèmes sur le téléphone mobile. Cependant, vous pouvez essentiellement trouver la réponse sur Baidu ou Google. Je vous souhaite bonne chance avec votre mise en page.

Answer 2

Vous pouvez lire cet article

Answer 3

<script>
    function setRemFontSize() {
        var remSize = window.innerWidth / 7.5;
        document.querySelector("html").style.fontSize = (remSize > 100 ? 100 : remSize) + "px";
    }
    setRemFontSize();
    window.addEventListener("resize", function () {
        setTimeout(function () {
            setRemFontSize();
        }, 200)
    });
</script>

Mettez ce code dans l'en-tête de votre fichier html pour surveiller les changements de fenêtre, puis marquez s'il fait 750px
Écrivez-le comme 7,5rem

Answer 4

Comment mettre en œuvre les achats mobiles : http://www.w3cplus.com/mobile...

Answer 5

Je ne pense pas qu'il soit nécessaire de faire exactement la même chose que le dessin de conception. Ne parlons pas de l'implémentation ou non. Si c'est vraiment précis, combien de temps de débogage sera perdu ? D’ailleurs, est-ce que ça vaut le coup si le nombre d’images est bon ? Si vous avez ce temps, autant faire quelque chose de pratique. Si vous êtes une personne qui aspire à l'excellence, vous pouvez également essayer.

Deuxièmement, vous avez dit que certains des fichiers PSD qui vous ont été fournis par l'artiste (il est recommandé de les appeler « design » à l'avenir) ne sont pas marqués, et vous ne savez pas comment le faire. des outils de marquage sur Internet, tels que : Biaoniimei et pxCook.

Troisièmement, vous avez dit que si vous utilisez le simulateur dans Chrome pour le configurer sur l'iPhone 6, il sera mis à l'échelle. Puis-je dire que sa taille peut être définie ?

Answer 6

Il se trouve que j'écris récemment une application mobile d'une seule page et j'apprends également. Il est recommandé d'apprendre certaines méthodes de prétraitement CSS telles que le stylet, puis vous pouvez définir une méthode, par exemple
Mes photos sont XXXX@2x.png, XXXX@3x.png Ces deux correspondent à des téléphones portables avec des dpi différents
Ensuite. J'ai défini une méthode :

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

Ensuite, à chaque fois que vous en avez besoin

p{
    bg-image:url('xxxx')
}

Ensuite, après compilation par l'outil d'emballage, différentes images seront affichées pour les téléphones mobiles avec différents dpi.
Ce n’est peut-être pas clair. . Parce que je suis aussi nouveau dans le stylet

De plus, pour le débogage, vous pouvez essayer les outils de développement Web WeChat

Answer 7

Vous devez correspondre à des pages avec des résolutions différentes. Le dessin de conception marque les pixels spécifiques pour vous. C'est un peu bizarre. L'artiste ne doit pas comprendre le front-end.

Pour la mise en page mobile, par expérience personnelle,
1. Il est recommandé d'utiliser un pourcentage pour la largeur
2 La hauteur est automatiquement agrandie ou un pourcentage
3 Concernant la taille de la police, je pense que la recommandation principale est rem mais je préfère vw, utilisez. VW n'a plus du tout besoin de porter de jugement sur la résolution des médias. Certaines personnes disent que VW n'est pas compatible avec certains anciens téléphones mobiles. D'après mon test actuel, la proportion de ceux qui ne sont pas compatibles avec VW est presque négligeable dans mon test actuel.

Answer 8

1. Le pourcentage de largeur et la taille fixe sont utilisés en fonction de la situation, box-sizing : border-box fonctionne bien.

2. Utilisez media query ou rem pour les polices Personnellement, j'utilise essentiellement media query car il doit également être adapté au PC.

3. L'adaptation du terminal mobile est basée sur la taille de l'iPhone 6. Sinon, assurez-vous simplement qu'il n'y a pas de problèmes d'affichage. La transformation peut être utilisée pour mettre à l'échelle certains éléments, le cas échéant.

4. Un écart de 0 pixels n’est pas nécessaire, tant qu’il permet d’obtenir l’effet d’affichage. La page est destinée aux utilisateurs, pas aux artistes.

Answer 9

Fondamentalement, tous sont basés sur l'iPhone6. Ce sera bien s'il peut être affiché sur l'iPhone 4. La vue est presque correcte. A l'origine, il y a une différence entre la vue sur l'ordinateur et celle du téléphone portable. Il existe des différences dans la longueur du projet de conception et du texte lui-même