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.

Vous pouvez lire cet article

<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

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

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 ?

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

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.

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.

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