√天堂8资源中文在线,国产精品久久久久久av

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

javascript - 拿到美工/UI的PSD圖，接下來(lái)寫(xiě)前端頁(yè)面的順序，求指導(dǎo)

高洛峰 2017-05-16 13:21:54

1116

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

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

其實(shí)，說(shuō)了這麼久，還是自己完全不知道怎麼製作手機(jī)端頁(yè)面，大家是怎麼製作的啊，有沒(méi)有什麼教程什麼的啊，我是否真的需要適配所有分辨率下的手機(jī)頁(yè)面？我適配了iphone5下的頁(yè)面大致一樣，結(jié)果美工會(huì)說(shuō)iphone6plus下怎麼和psd元素差這麼多（距離什麼的），前端就我一個(gè)人，美工也不懂前端，知乎不敢發(fā)帖，回答裡面動(dòng)不動(dòng)就是幾百行文字，嚇?biāo)廊?。大家支支招啊?

高洛峰

擁有18年軟件開(kāi)發(fā)和IT教學(xué)經(jīng)驗(yàn)。曾任多家上市公司技術(shù)總監(jiān)、架構(gòu)師、項(xiàng)目經(jīng)理、高級(jí)軟件工程師等職務(wù)。網(wǎng)絡(luò)人氣名人講師，...

全部回覆(9)

劉奇2017-05-16 13:23:54 9樓

其一：你說(shuō)的iphone6會(huì)縮放，是指chrome調(diào)成手機(jī)模式調(diào)試的時(shí)候，iphone6的底部排版看不到嗎？如果是的話，可以將那個(gè)100%縮小到75%，就可以整體顯示了，也不會(huì)看不清楚字體。如圖：

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

其三:個(gè)人認(rèn)為沒(méi)必要0像素差，因?yàn)楣ぷ髁康拇_很大，只要每個(gè)介面保持的距離範(fàn)圍視覺(jué)上一樣就可以，所以你的距離等也都需要rem佈局，誤差也不會(huì)太大。

其四：我自己習(xí)慣是用最大的那個(gè)，如果你不嫌麻煩或者公司有需要，你可以每個(gè)都圖標(biāo)都media一下，如果沒(méi)需求的話，直接選用最大的吧，大屏幕上也會(huì)清晰顯示的。

行動(dòng)裝置佈局可能會(huì)遇到很多的適配問(wèn)題，而且chrome的調(diào)試不一定準(zhǔn)確，電腦顯示正常，手機(jī)上也可能有其他問(wèn)題，不過(guò)基本百度或者google都可以找到答案，祝你佈局順利。

點(diǎn)贊 +0

新增回覆

阿神2017-05-16 13:23:54 8樓

可以看一下這篇文章

點(diǎn)贊 +0

新增回覆

過(guò)去多啦不再A夢(mèng)2017-05-16 13:23:54 7樓

<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檔頭用來(lái)監(jiān)聽(tīng) 視窗變化然後標(biāo)註如果是750px
寫(xiě)成7.5rem

點(diǎn)贊 +0

新增回覆

Peter_Zhu2017-05-16 13:23:54 6樓

手淘的實(shí)現(xiàn)方式：http://www.w3cplus.com/mobile...

點(diǎn)贊 +0

新增回覆

曾經(jīng)蠟筆沒(méi)有小新2017-05-16 13:23:54 5樓

我覺(jué)得不一定要完全做的和設(shè)計(jì)圖一樣，先除去實(shí)現(xiàn)不實(shí)現(xiàn)的了不說(shuō)，要真是搞的一像數(shù)不差，那得浪費(fèi)多少調(diào)試時(shí)間？再則一像數(shù)不差是否值得你去做？如果有那個(gè)時(shí)間，不如去做一些實(shí)在的事，如果你是個(gè)精益求精的人，也可以去試試。

其二、你說(shuō)美工（建議以後改叫「設(shè)計(jì)」）給你的PSD檔案有些沒(méi)有標(biāo)註，不知道怎麼弄，這個(gè)網(wǎng)路上有很多自動(dòng)標(biāo)註工具，如：標(biāo)你妹、pxCook。

其三、你說(shuō)在Chrome中用模擬器設(shè)定成iphone6會(huì)被縮放，我能說(shuō)它的尺寸是可以設(shè)定的嗎。

點(diǎn)贊 +0

新增回覆

淡淡煙草味2017-05-16 13:23:54 4樓

剛好最近在寫(xiě)一個(gè)手機(jī)端單頁(yè)應(yīng)用，我也是在學(xué)習(xí)中。建議學(xué)習(xí)一些css預(yù)處理的方法例如stylus，然後就可以相當(dāng)於定義一個(gè)方法比如說(shuō)
我的圖片是XXXX@2x.png, XXXX@3x.png 這兩個(gè)分別是對(duì)應(yīng)不同dpi的手機(jī)
然後我就定義了一個(gè)方法：

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

然後每次需要使用的時(shí)候

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

接著經(jīng)過(guò)打包工具編譯之後就會(huì)針對(duì)不同dpi的手機(jī)顯示不同的圖片。
可能說(shuō)的不太清楚。。因?yàn)槲乙彩浅鯇W(xué)stylus

另外關(guān)於調(diào)試的話，可以試試微信web開(kāi)發(fā)者工具

點(diǎn)贊 +0

新增回覆

小葫蘆2017-05-16 13:23:54 3樓

需要相應(yīng)不同解析度的頁(yè)面，設(shè)計(jì)圖給你標(biāo)註出了具體像素，這件事有點(diǎn)太匪夷所思了，美工肯定不懂前端。

對(duì)於行動(dòng)端的佈局，個(gè)人經(jīng)驗(yàn)來(lái)講，
1、寬度建議多用百分比
2、高度高度要么自動(dòng)撐開(kāi)，要么百分比
3、關(guān)於字體大小，我看主流推薦還是rem但我更喜歡vw，用vw根本不需要再做media的分辨率判斷了。 vw有人說(shuō)對(duì)一些老款手機(jī)相容性不好，根據(jù)我的實(shí)際測(cè)試，目前不相容vw的在我的實(shí)際測(cè)試中，比例幾乎可以忽略。

點(diǎn)贊 +0

新增回覆

滿天的星座2017-05-16 13:23:54 2樓

寬度百分比和固定尺寸視情況而定使用，box-sizing：border-box 很有效。
字體用媒體查詢或rem，我個(gè)人基本上是在用媒體查詢，因?yàn)橥瑫r(shí)需要適配pc。
行動(dòng)端適配以iphone6尺寸為準(zhǔn)，其他的保證顯示不出問(wèn)題就行。適當(dāng)可以使用transform來(lái)縮放某些元素。
0像素偏差沒(méi)必要，只要能達(dá)到顯示的效果就好。頁(yè)面是面向使用者的，不是面向美工的。

點(diǎn)贊 +0

新增回覆