網頁適應怎麼做？
我是UI新人 剛入職，一直按照1920*1080的畫布做web的設計圖，但是前端敲出來的網頁和我的設計圖並不很符合，比如高度我設計的1080但他做出來的往往要高很多，需要滾輪瀏覽，還有如果用14寸的電腦看時，沒法同步縮小，看起來很不舒服，這個是要我或者他去做？要怎麼做？謝謝
- 電腦屏幕解析度也是 1920*1080，且瀏覽器全屏嗎？還需要看顯示的內容和設計稿是否一致，如果這些都符合前端做出來的仍然高很多，那就是前端的問題。另外瀏覽器的可視區域通常比電腦屏幕高度要小。
- 14英寸屏幕看時，「同步縮小」的說法太模糊了，通常 PC 端響應式網頁設計不會整個網頁所有文字、圖片等等比例縮小，雖然這個技術上面可以實現。響應式設計是針對不同寬度屏幕採用不同的顯示，而非簡單所有變窄。比如文字變小，顯示內容布局變化。
整個網站，乃至整個公司應該有一套設計規範，其中也包含常見的響應式設計處理，這個需要設計、前端雙方多溝通協商。
關於響應式設計可以多參考其他人的經驗，比如 uisdc 上面響應式設計相關文章，借鑒其他網站的響應式處理等。
你需要了解一下前端是如何把設計轉化成頁面的。
前端需要知道你設計的所有元素的值，如果是一個標題，這些屬性值包括但不限於：字體、字型大小、行高、顏色、粗細、背景色、是否有裝飾等等，對應這些屬性是一些css代碼：font-family, font-size ,font-weight, color , background, text-decoration ...等等。
影響實際效果的還有塊模型和布局，你需要了解css盒子模型。你要知道除了你畫出來可視的部分，那些間距、留白在頁面里是如何實現的也要有清晰的認識——因為前端在處理這些效果的時候，他的理解和你的理解可能不一樣。你理解兩個塊之間應該有個間距，比如 margin-bottom:30px；而前端可能是以整個塊上下都間距margin:15px，這樣兩個塊湊到一起的時候形成了30px的間距。
這只是一個簡單的例子，用來說明頁面是否能百分之百還原你的設計稿其涵蓋非常多的細節。
而你的問題里能看出你可能並不理解這些內在原理，而在這個基礎上，你又提了另一個更複雜的問題：響應式布局及屏幕寬度的兼容性。如果我沒理解錯，你還希望看到不同寬度下，某些元素的動態變化，比如縮小。這就需要你不僅僅提供某一個寬度下的視圖設計稿。你要把所有可能的寬度下的效果體現出來。
也就是至少涵蓋 pad 768px+、desktop 1024px+、 large-desktop 1200px+，等等若干個解析度下的效果。因為你不能保證用戶瀏覽器是多寬，所以你要想到前面，對若干種寬度做不同效果的設計。
然後你要了解如何實現這些動態變化，一個常用的方法是css的媒體查詢。具體的方法涉及前端的知識，你不必太關注細節，但你要告訴前端，768px~1024px的時候我要這個效果，1024~1200px我要這個效果——當然不是你說要就有，你還得提供設計稿、標註稿讓前端對著來做。例如我之前一個項目的首頁，為了做響應式效果就需要把所有的情況都提供給開發。
最好你還熟悉一下一些響應式的框架，熟悉，我的意思是不需要你去敲代碼，但要了解原理，知道開發能夠用這個框架實現什麼樣的效果。比如bootstrap，antdesign，諸如此類。
通過你的問題和我以上的說明。你大概應該明白了，這個鍋如果讓前端背他可能不背，可能得你（設計師）和前端一起背 。
個人意見，僅供參考，歡迎交流，http://yinyu.name
看了看倆前端回答的都很有偏向性啊！還原度有問題 你們在那找什麼借口理由，適配也不對，這就是你們技術不行 凈扯什麼溝通 ，你有什麼需求可以直接給UI提，這是ui溝通的問題？還原度這麼差，菜就承認 如果你們需要不同尺寸的設計稿 ui完全可以提供 你們照著做不出來 要不就去提升技能 要不就別幹了 甩什麼溝通的鍋？
還有 還原度、適配什麼的 讓測試去測 有問題 測試反饋給前端
首先, 兼容大屏小屏, 這個設計前要有所了解, 比如, 主流用戶的設備解析度是多少, 要兼容到多少?
如果真要兼容不同解析度, 那設計師確實需要考慮
如果設計圖跟實物不符, 應該協商調整.
自適應這個兩者都應該考慮到, 並協商調整.
具體情況我本人並不清楚, 所以不太好評論
不過我覺得工作就是協商和溝通. 這個不是誰的問題, 是大家的問題.
有時候沒那麼多是非對錯, 是誰的問題, 世界是灰色的
rem 移動端適配方案?mp.weixin.qq.com
可以看看這個
先說你一兩句
設計前，你就本能沒有考慮過不同顯示器狀態下 最終設計應該呈現的效果；
設計圖初期，你就應該有個大致的框架，
1024 1440 1920，不同顯示器就應該有對應的呈現效果
其實一個合格的UI，還應該考慮手機、iPad不同情況下呈現；
至少在設計規範交付時也應該有註明；這樣前端開發才好做下一步的工作；
其二：
你設計高度1080？這是哪個老師教你的？
你難道不知道瀏覽器有狀態欄嗎？
不同瀏覽器的狀態欄高度還不一樣；你這樣搞沒有下拉滾動條才怪；
另外：說下前端開發，也忒不專業了，一個合格的前端，至少能想到等比例縮放；
如果是PC端的網頁的話。在設計稿方面（就是你的工作），一般會分為兩類內容。有效區域和自適應區域。
1.有效區域
有效區域的內容就是需要設計稿適配到解析度最小的屏幕（具體多大根據公司需求）。現在比較慣用的有效區域寬度尺寸為1200像素。這1200像素的內容始終顯示在屏幕的水平居中位置。如果用戶的屏幕尺寸大於1200，則有效區域的兩側會出現留白。如果屏幕尺寸小於1200，則屏幕可橫向滾動。你的工作就是有效區域在設計稿的水平居中位置，兩側留白即可。2.自適應區域自適應區域一般是跟隨屏幕寬度變化，就是屏幕不論多寬，自適應區域的左右邊界始終是和屏幕的左右邊界對齊的。你這裡只需要將該區域的左右邊界對齊設計稿的左右編輯對齊即可。支付如何跟隨屏幕尺寸變化，就是前段的工作了。想企業官網的抬頭，輪播圖，這些一般都屬於自適應區域。這些其實你多瀏覽些優秀的網站，然後結合自己公司的需求，並不難確定。
推薦閱讀：
