javascript - 拿到美工/UI的PSD圖,接下來寫前端頁面的順序,求指導
高洛峰
高洛峰 2017-05-16 13:21:54
0
9
861

拿到手的psd是750*1334分辨率,這應該是iphone6的分辨率,那麼,此時是不是我的chrome模擬器就要設定成iphone6了?如果是的話,那麼
《問題1》來了。我的電腦解析度是1366*768,chrome模擬iphone6的話會縮放,影響做網頁效果,我一般設定成iphone5,這樣的話能夠不縮放顯示手機端頁面,字體也就不會因為縮放模糊。那如果設定成iphone5來做iphone6的psd,肯定無法做到完全一樣(圖示大小肯定要比psd的小一點)。後來,
《問題2》我設定了不同解析度下的html的font-size不一樣,所有涉及到長度寬度行高這些css都用rem單位,不採用px和em,但是這樣的話,也只能在各個解析度的手機端下勉強湊活,根本無法完全和psd一樣。於是,我又糾結了。
《問題3》,美工給的iphone的psd,有的頁面上會標註元素長度px,有的沒有,那我就很奇怪,我是否應該把chrome模擬器設定成iphone6然後跟psd做到像素級的0偏差?至於iphone5和iphone6plus解析度下的頁面我該用@media來分別寫嗎?那太累了! !以前PC端倒是可以0像素偏差,可是手機端感覺力不從心!
《問題4》有時候收到的PSD裡面的有5個資料夾例如drawable-xxhdpi,其實就是不同解析度下icon,我一般是用的最大的資料夾裡面的icon,那麼,這是偷懶麼?是不是應該適配不同解析度的手機並且@media使用不同大小的icon,這樣的話,我不是更加吃不消麼?

--------------------------------分割線------------- ------------------------

其實,說了這麼久,還是自己完全不知道怎麼製作手機端頁面,大家是怎麼製作的啊,有沒有什麼教程什麼的啊,我是否真的需要適配所有分辨率下的手機頁面?我適配了iphone5下的頁面大致一樣,結果美工會說iphone6plus下怎麼和psd元素差這麼多(距離什麼的),前端就我一個人,美工也不懂前端,知乎不敢發帖,回答裡面動不動就是幾百行文字,嚇死人。大家支支招啊。

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆 (9)
刘奇

其一:你說的iphone6會縮放,是指chrome調成手機模式調試的時候,iphone6的底部排版看不到嗎?如果是的話,可以將那個100%縮小到75%,就可以整體顯示了,也不會看不清楚字體。如圖:

其二:做行動裝置佈局的話,建議使用flexible.js,可以自行百度一下,這是手淘的插件,網路上會有很多比較詳細的解釋,直接引入這個js,佈局的時候rem一般是參考75px設定就可以,字體是依照data-dpr設定的,通常需要設定三個,一個是為1的時候,一個是為2的時候,一個是為3的時候,所以行動端字體大小盡量保持一致,你使用的標籤最好也保持一致,工作量會小很多。

其三:個人認為沒必要0像素差,因為工作量的確很大,只要每個介面保持的距離範圍視覺上一樣就可以,所以你的距離等也都需要rem佈局,誤差也不會太大。

其四:我自己習慣是用最大的那個,如果你不嫌麻煩或者公司有需要,你可以每個都圖標都media一下,如果沒需求的話,直接選用最大的吧,大屏幕上也會清晰顯示的。

行動裝置佈局可能會遇到很多的適配問題,而且chrome的調試不一定準確,電腦顯示正常,手機上也可能有其他問題,不過基本百度或者google都可以找到答案,祝你佈局順利。

    阿神

    可以看一下這篇文章

      过去多啦不再A梦

      這段程式碼 放到你html檔頭 用來監聽 視窗變化 然後 標註如果是750px
      寫成7.5rem

        Peter_Zhu

        手淘的實現方式:http://www.w3cplus.com/mobile...

          曾经蜡笔没有小新

          我覺得不一定要完全做的和設計圖一樣,先除去實現不實現的了不說,要真是搞的一像數不差,那得浪費多少調試時間?再則一像數不差是否值得你去做?如果有那個時間,不如去做一些實在的事,如果你是個精益求精的人,也可以去試試。

          其二、你說美工(建議以後改叫「設計」)給你的PSD檔案有些沒有標註,不知道怎麼弄,這個網路上有很多自動標註工具,如:標你妹、pxCook。

          其三、你說在Chrome中用模擬器設定成iphone6會被縮放,我能說它的尺寸是可以設定的嗎。

            淡淡烟草味

            剛好最近在寫一個手機端單頁應用,我也是在學習中。建議學習一些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開發者工具

              小葫芦

              需要相應不同解析度的頁面,設計圖給你標註出了具體像素,這件事有點太匪夷所思了,美工肯定不懂前端。

              對於行動端的佈局,個人經驗來講,
              1、寬度建議多用百分比
              2、高度高度要么自動撐開,要么百分比
              3、關於字體大小,我看主流推薦還是rem但我更喜歡vw,用vw根本不需要再做media的分辨率判斷了。 vw有人說對一些老款手機相容性不好,根據我的實際測試,目前不相容vw的在我的實際測試中,比例幾乎可以忽略。

                滿天的星座
                1. 寬度百分比和固定尺寸視情況而定使用,box-sizing:border-box 很有效。

                2. 字體用媒體查詢或rem,我個人基本上是在用媒體查詢,因為同時需要適配pc。

                3. 行動端適配以iphone6尺寸為準,其他的保證顯示不出問題就行。適當可以使用transform來縮放某些元素。

                4. 0像素偏差沒必要,只要能達到顯示的效果就好。頁面是面向使用者的,不是面向美工的。

                  过去多啦不再A梦

                  基本上都iphone6為基準。 iphone 4上能顯示就行了。 視圖差不多ok. 本來電腦上視圖和手機上就有差別。包括設計稿和實際 文字的長短都有差別的

                    最新下載
                    更多>
                    網站特效
                    網站源碼
                    網站素材
                    前端模板
                    關於我們 免責聲明 Sitemap
                    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!