A. 問一下,網站的設計圖是1920的,那我前端應該怎麼實現呢,寫多少像素呢,該怎麼適配不同解析度呢
根據用戶使用的設備，使用JS代碼，讓圖片按比例縮小或者增大圖片解析度。
img { max-width: 100%; height: auto; }
或者用前端框架bootstrap ，直接在圖片上價格class = "img-responsive"
B. 網頁設計中頁面尺寸標准
對於固定寬度的網站布局，設計師常用的解析度有：760px、780px、920px、950px等，如今大尺寸、寬屏幕的顯示器越來越多，越來越普及，有些設計師也開始採用1000px、1003px這樣的解析度。
頁面最大化、滿屏化的網站看著的確是舒服，但過高的解析度在設計師顯示器上合適，並不代表在瀏覽者的顯示器上也合適。現在用的最多的解析度還是1024×768，在這種解析度下，含滾動條的頁面最大寬度應不超過994px，所以一般頁面寬度定位在990px以內比較適宜。
這一講主要來說說網頁設計的標准尺寸
一、在800×600解析度下，頁面寬度應在778px以內，這樣不會出現橫向滾動條，高度可以依據版面和內容而定。
二、在1024×768解析度下，頁面寬度應在1003px以內，如果僅一屏顯示的頁面，高度在612px～615px之間，這樣橫向和縱向滾動條都不會出現。
三、在photoshop中做800×600解析度下僅一屏的網頁時，尺寸可以設為740×560左右。
頁面標准按800×600解析度製作，尺寸為778px×434px
頁面長度一般不要超過三屏，寬度不宜出現橫向滾動條為宜
每個標准頁面為A4幅面大小，即8.5×11英寸
全尺寸banner為468px×60px，半尺寸banner為234px×60px，小banner為88px×31px
小圖標的標准尺寸還有120px×90px、120px×60px等
每個非首頁靜態頁面含圖片位元組不超過60K，全尺寸banner不宜超過14k
標准網頁廣告尺寸規格
1、120×120，這種廣告規格適用於產品或新聞照片展示。
2、120×60，這種廣告規格主要用於做LOGO使用。
3、120×90，主要應用於產品演示或大型LOGO。
4、125×125，這種規格適於表現照片效果的圖像廣告。
5、234×60，這種規格適用於框架或左右形式主頁的廣告鏈接。
6、392×72，主要用於有較多圖片展示的廣告條，用於頁眉或頁腳。
7、468×60，應用最為廣泛的廣告條尺寸，用於頁眉或頁腳。
8、88×31，主要用於網頁鏈接，或網站小型LOGO。
廣告形式 像素大小 最大尺寸 備注
BUTTON 120×60(必須用gif) 7K
215×50(必須用gif) 7K
通欄 760×100 25K 靜態圖片或減少運動效果
430×50 15K
超級通欄 760×100 to 760×200 共40K 靜態圖片或減少運動效果
巨幅廣告 336×280 35K
585×120
豎邊廣告 130×300 25K
全屏廣告 800×600 40K 必須為靜態圖片，FLASH格式
圖文混排 各頻道不同 15K
彈出窗口 400×300(盡量用gif) 40K
BANNER 468×60(盡量用gif) 18K
懸停按鈕 80×80(必須用gif) 7K
流媒體 300×200
（可做不規則形狀但尺寸不能超過300×200） 30K 播放時間小於5秒60幀(1秒/12幀)
網頁中的廣告尺寸
1.首頁右上，尺寸120×60
2.首頁頂部通欄，尺寸468×60
3.首頁頂部通欄，尺寸760×60
4.首頁中部通欄，尺寸580×60
5.內頁頂部通欄，尺寸468×60
6.內頁頂部通欄，尺寸760×60
7.內頁左上，尺寸150×60或300×300
8.下載地址頁面，尺寸560×60或468×60
9.內頁底部通欄，尺寸760×60
10.左漂浮，尺寸80×80或100×100
11.右漂浮，尺寸80×80或100×100
以上幾種說法可能有點小的出入，大家可以探討一下。
拓展閱讀：網頁設計防止頁面被撐開的方法
一、直接在網頁里設置圖片大小，比如代碼：img src="/uploads/allimg/200907/20090701160532188.jpg" width="600" height="500" border="0"，這樣雖然可以限制了圖片大小，但是需要在上傳圖片之前手動修改圖片大小，否則上傳的圖片就會變形。
二、使用如下代碼：img src="/uploads/allimg/200907/20090701160532188.jpg" onload="javascript:if(this.width600}{this.resized=true;this.style.width=600;}"
這種方法會在調用圖片的時候，自動按比例縮小到指定的寬度，不會引起圖片的變形，並且也不會撐破表格，但是缺點是，如果圖片太大，在圖片下載過程中，也就是圖片顯示過程中，會先以圖片原大小顯示，這時就會撐破表格，頁面很難看，二當圖片完全顯示後，圖片又會自動縮小。
三、我們可以針對表格的'屬性來限制大小防止被撐開，比如在table width="600" border="0" cellpadding="0" cellspacing="0"里添加代碼「」，其中「table-layout:fixed; 」是為了將表格布局固定住，就可以有效地防止表格被撐開，「word-wrap:break-word; 」是控制換行的，也就是強制執行換行，這個在文本內容較多的情況下需要使用到，特別是重復的內容出現，不執行換行的話，表格就被撐開了；而「word-break: break-all; 」可以解決IE的框架被英文（非亞洲語言文本行）撐開的問題，但是不會強制換行，只顯示表格寬度里的內容。一般情況下只要用到「」就可以。當然，上面調用的語句可以定義在css里，比如
table {
table-layout: fixed;
word-wrap:break-word;
}
四、用css控制圖片自適應大小，代碼如：
img {
max-width: 600px;
width:expression(this.width 600 ? "600px" : this.width);
overflow:hidden;
}
其中 max-width:600px; 在IE7、FireFox等其他非IE瀏覽器下最大寬度為600px，但在IE6中無效；width:600px; 在所有瀏覽器中圖片的大小為600px，當圖片大小大於600px，自動縮小為600px，在IE6中有效；而 overflow:hidden; 指將超出設置大小的部分隱藏，避免控制圖片大小失敗而引起的表格撐開變形。
五、最後總結一下最實用的代碼：
如果是表格，請用：
table {
table-layout: fixed;
word-break: break-all;
}
如果是div層，請用：
div {
table-layout: fixed;
word-wrap: break-word;
width: 加上寬度;
overflow: hidden; (讓多出來的不顯示。)
}
C. 網頁設計最標準的尺寸是多少
工具/材料
電腦
ps
- 01
當前最流行的解析度是1920*1080的，在該解析度下，頁面中心區域為1200px以內都可以。建議1000-1200
- 02
其他解析度情況下的尺寸如下：
800*600下，網頁寬度保持在778以內；
1024*768下，網頁寬度保持在1002以內； - 03
（1920*1080解析度下）頂部banner尺寸建議1920*500，最頂部信息欄與導航欄建議高度40、126
- 04
網頁中字體也是有使用規范的，合適的字體大小才能展現出最完美的效果，網頁尺寸標准字體不標准也不行（1920*1080解析度下）
特別提示
如果沒有指定的要求，以1920尺寸設計就好（這是目前最普遍的尺寸大小），前端開發人員會自行適配其他的解析度
D. 網頁設計---解析度是多少
960px 基本上是目前比較主流的頁面寬度——它可以讓1024x768解析度在最大化瀏覽器窗口的時候盡可能地使用寬度而不出現橫向滾動條。而且在桌面解析度逐步從1024x768過渡至更高解析度的時候 iPad2 的正好接了上來——雖然不能獲得最佳交互體驗但是 960px 頁面剛剛好可以獲得在平板電腦上的的視覺兼容。當然 960px 對於三欄式及以上布局支持不好，因此許多重內容網站開始使用大於1000px的寬度。比如淘寶（1000px），京東（1210px），花瓣（1407px）等……PS：960px 剛好是 Full HD 尺寸寬度的一半，因此如果使用 1920x1200 或 1920x1080 的用戶會習慣性使用 Win+← 和 Win+→ 快捷鍵同時把2個頁面固定在桌面上（雖然會遮蔽一點點內容）。閱讀體驗非常有趣。
初學html是老師告訴我們的是一般960px，現在應該有好多這樣寬度的設計，不過現在顯示屏的設備一般在1024以上了，比如現在的筆記本一般是1336*768，這有那些大頭的顯示屏解析度保持在1024左右，新的液晶顯示屏也都已經達到了1440*900的解析度，所以現在設計的話一般是960px,980px,1000px,1024px！
E. HTML5移動網頁的設計稿尺寸應該是多少
HTML5的移動端網頁設計稿，通常情況下，內容區為750px或960px或者1080px的，一般不小於750px像素大小（寬度）
設計稿可以比750px大，但是絕對不能比750px小，這個主要是由於當前手機的解析度相對較高（iPhone 6是375物理像素，但實際像素為其兩倍，也就是750，這個750就是這么來的）
如果設計圖稿過小，前端在實現圖稿的時候裡面的圖片大小在高解析度的情況下會顯得模糊不清，所以這也是為何要「大」解析度
此外需要注意的是，要保證頁面的基準字體大小，在320px的設計稿當中，最小字體不宜小於12像素，其他像素的設計稿當中，等比例換算即可（12/320px*設計稿像素值）
F. 前端在拿到UI的設計圖是1920*1080的，效果是全屏的，如何來開發
如果都是圖片的話 用背景圖
backgroud-size:cover
填充
如果是內容的話 就要用媒體查詢了！
@meadia sreen and (max-winth:1200){}
寫不同屏幕下的樣式
手機碼字不容易
忘採納！
G. web前端主要需要適應多大解析度
現在的顯示器主要是1920*1200的解析度，但也有一些筆記本用的1280*800等，還有就是一些4k顯示器也是存在的。所以看你採用固定布局還是自適應布局，固定布局的話，建議不超過1200px，自適應布局的話可以看看bootsrap這個前端框架。至於手機開發，有很多專門的框架的，比如bootstrap、jQuery mobile等
H. web前端，一張圖片的實際尺寸為1334×662，屏幕解析度比這張圖片還高，前端如何設計鋪滿整個屏幕的
一般是這樣的，
假設屏幕和圖片寬度比 大於高度比 應該設置圖片高度為屏幕高度，然後寬度等比拉伸並且居中；
假設屏幕和圖片寬度比 小於高度比 應該設置圖片寬度為屏幕寬度，然後高度等比拉伸並且居中；
I. 前端解析度適配
現在手機屏大小不一，而且屏幕硬體性能也各不相同，一般的UI設計都是基於特定機型畫設計搞件的，常見的是基於iPhone6的解析度設計2倍圖，以iPhone6為例，屏幕物理像素寬度是750，網頁寬度為375PX。開發中還要根據不同手機留出設計餘量，因為不同解析度的手機顯示時會有拉伸位移。
網上也有一些方案，處理高清屏適配方案，但一般也只把DPR適配到2，彩用所有長度單位放大2位，網頁整體縮放50%的的做法，比如ant-mobile就支持這種方式，它可以定義一個less常量「@hd」來定義CSS中使用的基礎單位大小，但是這種方式在遇到網頁實際寬度大於375的設備時，還是不能1：1的還源UI設計稿。
我個人在項目中採用的是更復雜的實現方式，可以實現適配DPR大於2的手機屏，並接近100%的還源UI設計稿。具體的適配技術各家大同小異，這里不再細說，我只給出我自己的適配方案。
同大多數適配方法一樣，通過 rem 設計一個基礎的大小單位 ，做為整個頁面的基礎單位，再根據屏幕物理DPR結合屏寬計算這個單位的大小，
基礎單位 = 屏幕DPR * 網頁寬度 / 375（設計稿基準為375）
網頁縮放值 = 1 / 屏幕DPR
比如我的方案是把rem設為10px 再乘以「基礎單位」，這樣在設置一個設計稿上14號字的時候，就寫 1.4rem就可以了。另外編寫頁面布局時，也用這個計算出來的相對單位，這樣可以做到不管什麼樣的屏幕，UI設計搞都不會因寬度變化而變形。另外，如果使用ant-mobile這樣的支持高清方案的UI中間件，直接在配置中把它的LESS常量 「@hd」設置 為 「0.1rem」就可以了。
另外還有一個小的福利，就是在這個方案下，當你想畫出「1物理像素」的細邊框時，直接用 「1px」，就可以了，因為在這個方案下，1px對應的是一個物理像素。
下面給出我實踐中使用的適配代碼：(這是直接放在HTML文件中的版本）
//計算屏幕比例並設置html的font-size
/**
將html字型大小設置為10個設計像素（一個基準系數，即rem為10 設計稿像素）
設計一個縮放系數，以應對可能出現的適配高清屏要求
*/
( function () {
/**初始化方法
* _standard 設計稿對應的解析度
* base_DPR 設定最小DPR值
*/
function setInitialRem( _standard, base_DPR) {
//取得當前設備DPR
var dpr = window. devicePixelRatio || 1;
//如果設定了默認最小DPR值
if ( base_DPR) {
dpr = dpr >= base_DPR ? dpr : base_DPR;
}
//設定縮放視圖比例
var scale = 1 / dpr;
//設直視圖縮放比例
document. head. querySelector( 'meta[name="viewport"]'). content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no, shrink-to-fit=no";
//取得當前設備寬度
var device_width = document. documentElement. clientWidth; //window.innerWidth;
//標定原稿設計基準值 當前稿件設計寬度為 iPhone6/6s 375像素
var standard_width = _standard * dpr;
//設定基準單位
var base_value = 10;
//基準系數=設備寬度➗稿件基準寬度✖️設備DPR✖️10
var rem = device_width / standard_width * dpr * base_value;
//設置 REM
document. documentElement. style. fontSize = rem + "px";
}
window. addEventListener( "resize", function () { setInitialRem( 375, 1); });
setInitialRem( 375, 1);
})();
J. 網頁圖片設計尺寸設多少解析度設多少字型大小是多少字體是用什麼字體
1、寬度1003 px
2、解析度1024*768
3、字型大小一般12 px
4、字體是宋體