成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

首先從題目來說，為什么不是100%設(shè)計(jì)稿還原？其實(shí)100%是一個(gè)理想的狀態(tài)，有很大一部分設(shè)計(jì)師是不懂“頁面重構(gòu)”的，很多時(shí)候設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候，會著重考慮視覺因素，實(shí)現(xiàn)成本考慮的不會特別仔細(xì)。面對這些設(shè)計(jì)細(xì)節(jié)，瀏覽器兼容、開發(fā)周期、后臺數(shù)據(jù)循環(huán)因素等等都會影響到設(shè)計(jì)稿的還原效果，我們能做的就是盡可能的還原設(shè)計(jì)稿，無限接近100%還原，而不是追求100%的還原效果。

首先從題目來說，為什么不是100%設(shè)計(jì)稿還原？其實(shí)100%是一個(gè)理想的狀態(tài)，有很大一部分設(shè)計(jì)師是不懂“頁面重構(gòu)”的，很多時(shí)候設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候，會著重考慮視覺因素，實(shí)現(xiàn)成本考慮的不會特別仔細(xì)。面對這些設(shè)計(jì)細(xì)節(jié)，瀏覽器兼容、開發(fā)周期、后臺數(shù)據(jù)循環(huán)因素等等都會影響到設(shè)計(jì)稿的還原效果，我們能做的就是盡可能的還原設(shè)計(jì)稿，無限接近100%還原，而不是追求100%的還原效果?？赡苡行┤藭环?，我就要100%還原，那么OK，ps中和瀏覽器中相同字體顯示效果不一樣，你怎么辦？難道文字也全切成圖嗎？所以在大部分“頁面重構(gòu)”的時(shí)候，最負(fù)責(zé)任的做法是，在考慮易用性、合理性的前提下盡可能的實(shí)現(xiàn)設(shè)計(jì)稿99.9%的還原。

重構(gòu)的工作并不是前端工程師一個(gè)人的工作，還要包含與設(shè)計(jì)師、后臺工程師（php等）以及產(chǎn)品之間的溝通，中間很可能會涉及到設(shè)計(jì)圖的修改。

下邊從幾個(gè)方面聊聊頁面重構(gòu)中的一些問題：

1，頁面寬度問題

主要內(nèi)容部分，目前主要的分辨率一般都在960以上：960、1000、1200等，這些都屬于正常的尺寸，但也有設(shè)計(jì)師做出類似973、1011等奇葩尺寸… 這個(gè)問題我不太好意思拿出來聊，太低級了。當(dāng)然，奇葩的單數(shù)行高、相同元素不同大小等等這都是屬于相似問題。

2，毛邊問題

一個(gè)方方正正的按鈕，帶著一圈毛邊。這個(gè)問題也是在重構(gòu)中經(jīng)?？吹降氖虑?，雖然這個(gè)在寫頁面的時(shí)候可以很輕易的避開這個(gè)問題，但是不是看著很不爽？看下圖：

正常邊給人的感覺整齊干凈，毛邊顯得邊緣模糊不清，并且容易造成按鈕高度不明確。假如是半透明按鈕需要切圖的時(shí)候，還會造成圖片體積變大，所以這個(gè)問題應(yīng)當(dāng)避免。

3，圖層模式

有些設(shè)計(jì)圖中，某個(gè)元素例如某個(gè)按鈕，需要切png半透明圖片，但是這個(gè)按鈕居然跟背景圖是正片疊底或者顏色疊加。每當(dāng)我遇到這個(gè)問題的時(shí)候會有一股想自殺的沖動，所以為了世界和平，這個(gè)問題一定要避免。

4，圖層鏈接

頁面重構(gòu)的某些時(shí)候需要選擇某些圖層進(jìn)行移動，結(jié)果一動發(fā)現(xiàn)壞了，好多其它的元素跟著刷刷移動，瞬間感覺無力，默默的一個(gè)個(gè)取消圖層鏈接。不需要的圖層鏈接，能取消就取消吧。

5，某些圖片的尺寸

例如在某些列表中，縮略圖的尺寸，經(jīng)常會遇到119*73等等奇怪的尺寸。其實(shí)這種最好是用整數(shù)：120*80等，對頁面的柵格化、響應(yīng)式以及后臺裁圖存圖等都有很大的好處。

6，圖層命名和文件夾

這個(gè)其實(shí)跟題目關(guān)系不大，但這里要提一下。舉個(gè)例子：

你喜歡哪個(gè)？不用說了吧…

7，奇葩的邊距和填充

同等級的模塊，從視覺及內(nèi)容上都屬于同一類型，但上下邊距一個(gè)20px一個(gè)27px，左右填充一個(gè)10px一個(gè)7px，這種問題跟“1.頁面寬度問題”類似，都屬于低等級問題。

8，需要運(yùn)營的文字內(nèi)容使用特殊字體

這個(gè)請google一下網(wǎng)絡(luò)安全字體，中文的安全字體少的可憐，放過非設(shè)計(jì)師的頁面使用者吧。

9，不做極限設(shè)計(jì)

假如要設(shè)計(jì)一個(gè)按鈕，放在某個(gè)比較小的模塊里，那么請考慮一下按鈕包含的字?jǐn)?shù)最長的情況下是怎樣的。再比如一個(gè)類似微博名片的東西的簡介，設(shè)計(jì)圖中做了30個(gè)字，那么請考慮下100個(gè)字的情況。假如需要做截字，請規(guī)定多少字或者幾行字開始截，不要讓前端去猜。

以上問題都是設(shè)計(jì)師經(jīng)常遇到的一部分問題，并不是全部，下邊說說前端這邊的。

1，用輔助線說話而不是自己猜測

很多前端自詡像素眼，一眼就知道某個(gè)模塊的邊距是多少，字體有多大。這個(gè)一般問題不大，但有些時(shí)候差一兩個(gè)像素你不一定看的出來。凡是涉及到尺寸問題，一律輔助線。

2，css3圓角還是切圖圓角？css3投影還是切圖投影？

在遇到這種糾結(jié)的時(shí)候，請聯(lián)系設(shè)計(jì)師以及產(chǎn)品經(jīng)理，講明兩種方式的優(yōu)劣，這個(gè)問題可延展到其它類似css3實(shí)現(xiàn)效果的問題。

3，各種寬度寫死，各種切大圖啪啪啪

前者會導(dǎo)致，只要編輯或者數(shù)據(jù)與設(shè)計(jì)圖中的不一樣，你的頁面效果就完全“不一樣”了，做頁面重構(gòu)怎么算優(yōu)秀？最大程度的模塊化、最大程度的模塊可移植性、最大程度的自適應(yīng)性、各種極限情況的考慮。也就是你考慮的情況越多，自適應(yīng)性越強(qiáng)，你的代碼越健壯。

后者會導(dǎo)致啥？后臺或者編輯拿著刀子捅你…

4，字體問題

假如一段需要后期編輯或者拿數(shù)據(jù)的文字內(nèi)容，設(shè)計(jì)圖里是一個(gè)特殊字體，例如：“方正蘭亭西黑”，你自己電腦上也有，然后你直接在css樣式里用了這個(gè)字體… 會有啥結(jié)果不用多說了。遇到這種情況最重要的是需要跟設(shè)計(jì)商議，替換成安全字體，例如：微軟雅黑、宋體、黑體、Arial等，假如設(shè)計(jì)死活不同意，講道理！再不同意，叫上產(chǎn)品經(jīng)理一起講這個(gè)問題。

同樣，以上問題也只是眾多問題中的一小部分，以后想到的話也會逐漸補(bǔ)充進(jìn)去。解決各種問題最好的辦法是：多溝通。