javascript – Holen Sie sich das PSD-Bild der Grafik/Benutzeroberfläche und schreiben Sie dann die Reihenfolge der Front-End-Seite. Bitte geben Sie mir eine Anleitung.

Question

Die PSD, die ich erhalten habe, hat eine Auflösung von 750 * 1334, was der Auflösung von iPhone6 ​​entsprechen sollte. Wird mein Chrome-Simulator zu diesem Zeitpunkt auf iPhone6 ​​​​eingestellt? Wenn ja, dann ist „Frage 1“ hier. Die Auflösung meines Computers beträgt 1366 * 768. Wenn Chrome das iPhone 6 simuliert, wird die Wirkung von Webseiten beeinflusst, sodass die mobile Seite ohne Skalierung angezeigt werden kann wird aufgrund der Skalierung nicht unscharf. Wenn Sie es also auf iPhone5 einstellen, um die PSD von iPhone6 ​​zu erstellen, ist es definitiv nicht genau dasselbe (die Symbolgröße ist definitiv kleiner als die PSD). Später
"Frage 2" Ich habe die Schriftgröße von HTML bei verschiedenen Auflösungen unterschiedlich eingestellt. Alle CSS-Einheiten mit Länge, Breite und Zeilenhöhe verwenden rem-Einheiten anstelle von px und em. Aber in diesem Fall kann das nur ich Auf Mobiltelefonen mit verschiedenen Auflösungen komme ich kaum zurecht, kann aber nicht ganz mit PSD identisch sein. Also war ich wieder verwirrt.
"Frage 3", die vom Künstler bereitgestellte iPhone-PSD. Auf einigen Seiten wird die Elementlänge px markiert, auf anderen nicht. Dann ist es für mich sehr seltsam, ob ich den Chrome-Simulator auf iPhone6 ​​​​einstellen und ihn dann auf Pixelebene einstellen soll mit der PSD? 0 Abweichung? Sollte ich die Seiten mit der Auflösung von iPhone5 und iPhone6plus mit @media separat schreiben? Das ist so anstrengend! ! Früher konnte die PC-Version eine Pixelabweichung von 0 erreichen, aber die mobile Version fühlte sich machtlos an!
"Frage 4" Manchmal gibt es 5 Ordner in der empfangenen PSD, z. B. drawable-xxhdpi, bei denen es sich tatsächlich um Symbole mit unterschiedlichen Auflösungen handelt. Ist das also Faulheit? Sollte es an Mobiltelefone mit unterschiedlichen Auflösungen angepasst werden und @media Icons unterschiedlicher Größe verwenden? Wenn ja, wäre es für mich nicht noch überfordernder?

--------------------------------Trennlinie--------------- ----------

Nachdem ich so lange geredet habe, weiß ich immer noch nicht, wie man eine mobile Seite erstellt. Gibt es eine Anleitung oder so? Muss ich mich wirklich an alle Auflösungen anpassen? Ich habe die Seite unter dem iPhone 5 so angepasst, dass sie ungefähr gleich ist. Daher wird der Künstler fragen, warum sich das iPhone 6 Plus so sehr von den PSD-Elementen unterscheidet (z. B. der Abstand). Der Künstler versteht das Frontend nicht. Hier ist die Antwort. Es gibt Hunderte von Textzeilen, was beängstigend ist. Bitte geben Sie mir alle einen Rat.

Answer 1

其一：你说的iphone6会缩放，是指chrome调成手机模式调试的时候，iphone6的底部排版看不到吗？如果是的话，可以将那个100%缩小到75%，就可以整体显示了，也不会看不清字体。如图：

其二：做移动端布局的话，建议使用flexible.js，可以自行百度一下，这是手淘的插件，网上会有很多比较详细的解释，直接引入这个js，布局的时候rem一般是参照75px设置就可以，字体是根据data-dpr设置的，通常是需要设置三个，一个是为1的时候，一个是为2的时候，一个是为3的时候，所以移动端字体大小尽量保持一致，你使用的标签最好也保持一致，工作量会小很多。

其三:个人认为没必要0像素差，因为工作量的确很大，只要每个界面保持的距离范围视觉上一样就可以，所以你的距离等也都需要rem布局，误差也不会太大。

其四：我自己习惯是用最大的那个，如果你不嫌麻烦或者公司有需要，你可以每个都图标都media一下，如果没需求的话，直接选用最大的吧，大屏幕上也会清晰显示的。

移动端布局可能会遇到很多的适配问题，而且chrome的调试不一定准确，电脑显示正常，手机上也可能有其他问题，不过基本百度或者google都可以找到答案，祝你布局顺利。

Answer 2

可以看一下这篇文章

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>

这段代码 放到你html文件头部 用来监听 窗口变化 然后 标注如果是750px
写成7.5rem

Answer 4

手淘的实现方式：http://www.w3cplus.com/mobile...

Answer 5

我觉得不一定要完全做的和设计图一样，先除去实现不实现的了不说，要真是搞的一像数不差，那得浪费多少调试时间？再则一像数不差是否值得你去做？如果有那时间，不如去做一些实在的事，如果你是个精益求精的人，也可以去试试。

其二、你说美工（建议以后改叫“设计”）给你的PSD文件有些没有标注，不知道怎么弄，这个网上有很多自动标注工具，如：标你妹、pxCook。

其三、你说在Chrome中用模拟器设置成iphone6会被缩放，我能说它的尺寸是可以设置的吗。

Answer 6

刚好最近在写一个手机端单页应用，我也是在学习中。建议学习一下一些css预处理的方法 比如stylus，然后就可以相当于定义一个方法 比如说
我的图片是 XXXX@2x.png, XXXX@3x.png 这两个分别是对应不同dpi的手机
然后我就定义了一个方法：

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")

然后每次需要使用的时候

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

然后经过打包工具编译之后就会针对不同dpi的手机显示不同的图片。
可能说的不太清楚。。因为我也是初学stylus

另外关于调试的话，可以尝试 微信web开发者工具

Answer 7

需要相应不同分辨率的页面，设计图给你标注出了具体像素，这件事有点太匪夷所思了，美工肯定不懂前端。

对于移动端的布局，个人经验来讲，
1、宽度建议多用百分比
2、高度高度要么自动撑开，要么百分比
3、关于字体大小，我看主流推荐还是rem但我更喜欢vw，用vw根本不需要再做media的分辨率判断了。vw有人说对一些老款手机兼容性不好，根据我的实际测试，目前不兼容vw的在我的实际测试中，比例几乎可以忽略。

Answer 8

1. 宽度百分比和固定尺寸视情况而定使用，box-sizing：border-box 很管用。

2. 字体用媒体查询或者rem，我个人基本是在用媒体查询，因为同时需要适配pc。

3. 移动端适配以iphone6尺寸为准，其他的保证显示不出问题就行。适当可以使用transform来缩放某些元素。

4. 0像素偏差没必要，只要能达到显示的效果就行。页面是面向用户的，不是面向美工的。

Answer 9

基本都都iphone6为基准。iphone 4上能显示就行了。 视图差不多就ok. 本来电脑上视图和手机上就有差别。包括设计稿和实际 文字的长短都有区别的