㈠ 65寸大屏 前端頁面如何實現
1、用自適應，頁面大小隨屏幕大小而改變，字體大小用REM。
2、用媒體查詢，根據不同尺寸屏幕載入不同的CSS樣式也能達到同樣的效果。
㈡ 一般做網頁設計背景尺寸定多大
網頁的背景多大要看對網頁的要求的。
網頁設計標准尺寸：
1、800*600下，網頁寬度保持在778以內，就不會出現水平滾動條，高度則視版面和內容決定。
2、1024*768下，網頁寬度保持在1002以內，如果滿框顯示的話，高度是612-615之間，就不會出現水平滾動條和垂直滾動條。
為了做到主題鮮明突出，要點明確，應該使配色和圖片圍繞預定的主題；調動一切手段充分表現網站點的個性和情趣，辦出網站的特點。
專業的網頁設計，需要經歷以下幾個階段：
需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，從而建立起營銷模型。
以業務目標為中心進行功能策劃，製作出欄目結構關系圖。
以滿足用戶體驗設計為目標，使用axure rp或同類軟體進行頁面策劃，製作出交互用例。
以頁面精美化設計為目標，使用PS、AI等軟體，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。
根據用戶反饋，進行頁面設計調整，以達到最優效果。
以上內容參考：網路-網頁設計
㈢ h5頁面製作，設計多大的尺寸，怎麼和前端適配，實現設計的視覺稿效果
H5的頁面製作設計尺寸是有一定規范的，正常的話是考慮手機的適配問題，所以這個尺寸的話是基於手機來做的。
具體是多少呢？因為手機的尺寸是不一樣的，特別是在比例上，這就要求我們在不同的手機上必須要保證內容的呈現，一定是完整的，但自己要考慮一個問題，要把內容分為重要的和不重要，重要的是什麼呢，比如說背景圖；重要的話就是放一些文字信息等等。
這樣就劃分了一個安全區和出血區，出血區和安全區交界的部分，就是不重要的，可以在各位手機上被裁掉的或者用來遮住手機頁面背景的；但是安全的內容，是可以保證在任何大小屏幕手機上都可以完整顯示。
一般安全區內框的尺寸是375X603PX，但在製作上又是另外一回事了，作鋪滿內框的圖要按照這個尺寸的2倍大小去做。
出血區也就是外框尺寸是422X748PX，作鋪滿外框的圖要按照這個尺寸的2倍大小去做。
這個你可以參考下意派Epub360的畫布標准，這個工具是專業級的H5工具。
㈣ 前端基礎：viewports理解、頁面各種寬度理解
關於viewports以前一直都是知道個大概但是一直沒有詳細去了解，加上最近在項目中遇到了比較近點的1像素問題，就乘著這個機會再加深一下印象回顧一下基礎。
screen.width/height
含義：用戶的屏幕的完整大小。
度量：設備的pixels。
意思就是用戶屏幕的物理寬度，它們的值不會隨著用戶的縮放而改變：它們是顯示器的特徵，而不是瀏覽器的特徵。換句話說是屏幕出廠的時候就決定了的
window.innerWidth/Height
含義：包含滾動條尺寸的瀏覽器完整尺寸
度量：CSS的pixels
document.documentElement.clientWidth/Height
含義：viewport尺寸：瀏覽器窗口尺寸。
度量：CSS的pixels
隨瀏覽器大小變化而變化，但寬度不包含滾動條寬度。具體請看圖一比較兩者的差別。
viewport的功能在於控制你網站的最高塊狀（block）容器：<html>元素。怎麼理解這句話呢？
假設定義了一個可變尺寸的布局（liquid layout），且你定義一個側邊欄的寬度為width: 10%。當你改變瀏覽器窗口大小時，該側邊欄會自動擴張和收縮。這是什麼原理呢？
技術上講，原理是側邊欄的寬度為它父元素寬度的10%，我們設它的父元素是body，且你未指定寬度。那麼問題就變為了<body>的寬度到底是多少？
通常，一個塊級元素佔有起父元素的100%的寬度（這里有異常情況，暫時忽略）。所以<body>的寬度就是其父元素<html>的寬度。
那麼<html>元素到底有多寬？
<html>的寬度受viewport所限制，<html>元素為viewport寬度的100%。,因為它的寬度恰好為瀏覽器的寬度。所以你的側邊欄寬度width: 10%會佔用10%的瀏覽器寬度。
反過來，viewport是嚴格的等於瀏覽器的窗口：定義就是如此。viewport不是一個HTML的概念，所以你不能通過CSS修改它。它就是等於瀏覽器窗口的寬度高度 –—— 在桌面瀏覽器上如此，移動設備瀏覽器上有點復雜。
注意：當我們設置html上面手動的設置了寬度，在那種情況下document. documentElement. clientWidth/Height依然給出了viewport的尺寸，而不是<html>元素。
比如 我手動設置html的樣式為
html {width：2000px;height: 2000px;}
通過document. documentElement. clientWidth/Height 獲取到的值只會是viewport的大小，而不是html元素的大小 2000px;
所以document. documentElement. clientWidth/Height只會給出viewport的尺寸，而不管<html>元素尺寸如何改變。
document. documentElement. offsetWidth/Height
含義：<html>的尺寸
度量：CSS的pixels
如果clientWidth/Height一直用以標示viewport的尺寸，我們該如何去獲取<html>元素的尺寸呢？通過document.doucmentElement.offsetWidth/Height來獲取html的寬度。
像上面的那個例子，這個就會返回2000px;
含義：頁面的移位
度量：CSS的pixels
window.pageXOffset 和 window.pageYOffset，定義了頁面(document)的相對於窗口原點的水平、垂直位移。因此你能夠定位用戶滾動了多少的滾動條距離.
對應viewport我們現在普遍理解為兩種視圖:
1.visualviewport：window.innerWidth/Height定義 包含滾動條
2. layoutviewport: document.documentElement.clientWidth/Height 不包含滾動條
在理解這兩種viewport之前，我們先認識理解這幾個名詞的意思：首先我們要記住： 1 px 就一個像素點
iphone 默認viewport 是980
vw：是Viewport's width的簡寫,1vw等於window.innerWidth的1%
vh：和vw類似，是Viewport's height的簡寫，1vh等於window.innerHeihgt的1%
vmin：vmin的值是當前vw和vh中較小的值
vmax：vmax的值是當前vw和vh中較大的值
1. 像素密度 ：每英寸可以顯示的像素點的數量，像素密度越大，表示在同樣的尺寸裡面，像素點越多
比如：iphone 3 的屏幕像素是320x480,iphone4s的屏幕像素是640x960，剛好兩倍，然而兩款手機都是3.5英寸的。
1英寸是一個固定長度，等於2.54cm。 像素密度越高，代表屏幕顯示效果越精細。 Retina屏比普通屏清晰很多，就是因為它的像素密度高。
2.像素： 可以分為物理像素和CSS像素
物理像素（device independent pixels ）： 物理像素也叫設備像素，任何設備的物理像素是固定不變的。比如我的筆記本的解析度是1366 * 765，表示的就是寬度上最多容納1366個物理像素點，高度上最多容納765個物理像素點
CSS像素（CSS pixels ）：CSS像素也叫邏輯像素，是為web開發創造的。通常情況下，在桌面端，CSS像素的大小和設備像素的大小是相等的，即一個CSS像素完全覆蓋了一個設備像素。如下圖
但是在手機端，我們都知道網頁可以通過手指進行縮放，這時候CSS像素也會改變
縮小操作 ：當用戶進行縮小操作時，一個物理像素覆蓋了多個CSS像素。圖中深藍色表示物理像素，半透明的淺藍色表示CSS像素
當用戶進行放大操作時，一個CSS像素覆蓋了多個物理像素 ： 這里的一個css像素就不在等於一個物理像素了。當縮小兩倍的時候，兩個css像素相當於一個物理像素。
DPR
DPR（devicePixelRatio）指的是設備像素比，即網頁在不進行縮放使，設備像素和CSS像素的比值
DPR = 設備像素 / CSS像素(某一方向上)
從iphone4開始，蘋果公司推出了retina視網膜屏幕，這種技術在屏幕大小不變的情況下，屏幕像素密度提高了一倍，解析度自然也提高了一倍，於是DPR等於2
通過JS的screen.width和screen.height屬性，可以獲取屏幕的CSS像素
通過JS的window.devicePixelRatio屬性，可以獲取屏幕的DPR值
以iphoneX為例，css像素（設備獨立像素）為375px * 812px，DPR是3，可以計算出設備像素（物理像素）是1125px * 2436px
屏幕解析度
屏幕解析度就是設備像素，一般以縱向像素 * 橫向像素來表示解析度。比如iphoneX的設備像素是1125px * 2436px，解析度也就是1125px * 2436px
在不同的屏幕上，CSS像素所呈現的物理尺寸是一致的，而不同的是CSS像素所對應的物理像素具數是不一致的。在普通屏幕下1個CSS像素對應1個物理像素，而在Retina屏幕下，1個CSS像素對應的卻是4個物理像素（某一方向上相當於1個css像素對應2個物理像素。）。
比如：
在普通屏中 我設置一個div的樣式 width：100px ( 100px=100個物理像素。) ，當我將這個樣式放在了Retina的屏幕（dpr=2）上的時候，發現變的更加清晰了。這是我們由於兩個屏幕的像素密度不一樣的結果，後者的像素密度是前者的兩倍，所以在100px的css像素中的距離裡面就存在了200個物理像素。但是兩個展現的效果是一樣的（CSS像素所呈現的物理尺寸是一致的。）,只是裡面的像素點的數量不同。
同時：visualviewport還是顯示100px 但是對於layoutviewport來說就相當於200px。 因為layoutviewport表示的是物理像素。
但是對於圖片來說：
在普通屏幕下，1個點陣圖像素對應著1個物理像素，圖片可以完美的顯示。可是在retina屏幕下，1個點陣圖像素對應著4個物理像素，由於點陣圖像素不可以再分割，所以圖片就會只能就進取色，導致圖片模糊。
如何來處理這個問題呢。比如一個200 x 300的圖片，如果想在retina屏幕上清晰顯示的話，就要提供一個400 x 600的2倍圖片（@2x），這樣的話，1個點陣圖像素就會對應上retina屏上的1個物理像素。圖片就不會模糊啦。
說明：retina屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變為多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變為4個。
在高清顯示屏中的點陣圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍。那麼，前端的應對方案是：設計稿切出來的圖片長寬保證為偶數，並使用backgroud-size把圖片縮小為原來的1/2
//例如圖片寬高為：200px*200px，那麼寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px
.css{font-size:20px}
initial-scale這個縮放初始值是相對於設備的idea viewport的值進行縮放的，也就是說
<meta name="viewport" content="initial-scale=1">
//等效於
<meta name="viewport" content="width=devive-width"
//兩者各有一個bug，所以生產時最好將兩個一起寫上
但如果同時出現width和initial-scale
<meta name="viewport" content="width=500, initial-scale=1">
並不是根據先後順序比較，而是通過誰大取誰，比如設備是iphone5，idea viewport是320px，則此時initial-scale=1(320px)，所以此時viewport取width=500
關於initial-scale縮放的默認值以及其理論
visual viewport寬度 = idea viewport寬度 / 當前設置的縮放值
當前縮放值 = idea viewport寬度 / visual viewport寬度
註：這個理論不適合安卓原生瀏覽器
參考文章：
再聊移動端頁面的適配： https://www.w3cplus.com/css/vw-for-layout.html 閱讀碼：475709
使用Flexible實現手淘H5頁面的終端適配： https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.htm l 閱讀碼：487741
viewports剖析 https://www.w3cplus.com/css/viewports.html
移動web開發-理解設備像素、CSS像素、DPR - 羊先生
解惑好文：移動端H5頁面高清多屏適配方案 - CocoaChina_一站式開發者成長社區
㈤ 做手機網頁要考慮哪幾種尺寸呀
1、如果是比較復雜的頁面，我們只需要第一屏撐滿全屏，可以使用此方法。單獨定義html和body的樣式。【html,body{width:100%;height:100%;}】。
㈥ 移動端的h5頁面的尺寸是多少
近來，大尺寸手機屏幕日趨主流，意派Epub360根據對主流大屏的計算，現新增大尺寸手機屏幕的畫布，並命名為「微信Plus」。原來的普通微信尺寸將繼續保留。
內容安全區：375*603（750*1206）
出血區：422*748（844*1496）
左右邊框各：23.5px
上下邊框各：72.5px
根據該畫布，後續將會推出配套的layer組件等尺寸，即當選擇使用該微信尺寸時，layer畫布跟layer容器尺寸自動默認尺寸：375X603PX，方便調整。
㈦ HTML5移動網頁的設計稿尺寸應該是多少
HTML5的移動端網頁設計稿，通常情況下，內容區為750px或960px或者1080px的，一般不小於750px像素大小（寬度）
設計稿可以比750px大，但是絕對不能比750px小，這個主要是由於當前手機的解析度相對較高（iPhone 6是375物理像素，但實際像素為其兩倍，也就是750，這個750就是這么來的）
如果設計圖稿過小，前端在實現圖稿的時候裡面的圖片大小在高解析度的情況下會顯得模糊不清，所以這也是為何要「大」解析度
此外需要注意的是，要保證頁面的基準字體大小，在320px的設計稿當中，最小字體不宜小於12像素，其他像素的設計稿當中，等比例換算即可（12/320px*設計稿像素值）
㈧ 網頁設計最標準的尺寸是多少
工具/材料
電腦
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尺寸設計就好（這是目前最普遍的尺寸大小），前端開發人員會自行適配其他的解析度
㈨ 如何把web前端網頁做成自適應
1.首先，在網頁代碼的頭部，加入一行viewport元標簽。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9，對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用絕對寬度由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。具體說，CSS代碼不能指定像素寬度：width:xxx px;
只能指定百分比寬度：width: xx%;或者width:auto;
3、相對大小的字體
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
㈩ 手機前端頁面尺寸
iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隱藏URL與狀態欄)
iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隱藏URL與狀態欄)
Note2 360 * 567 (未隱藏URL與狀態欄)
iPad 3/4 768*928 (未隱藏URL與狀態欄)
GALAXY SIII 360 * 567 (未隱藏URL與狀態欄)
小米2A 360 *567 (未隱藏URL與狀態欄)
HTC G10 320 * 460
<meta name="viewport"
網頁手機wap2.0網頁的head里加入下面這條元標簽，在iPhone的瀏覽器中頁面將以原始大小顯示，並不允許縮放。
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
width - viewport的寬度 height -
viewport的高度
initial-scale - 初始的縮放比例
minimum-scale -
允許用戶縮放到的最小比例
maximum-scale -
允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
參考：
一、網頁手機wap2.0網頁的head里加入下面這條元標簽，在iPhone的瀏覽器中頁面將以原始大小顯示，並不允許縮放。
<meta name="viewport"
content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no">
其中： width - viewport的寬度 height - viewport的高度 initial-scale -
初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例
user-scalable -
用戶是否可以手動縮放c
二、關於meta的詳細介紹請參考
三、下文是關於Meta的例子的詳細介紹 原文地址
3. Meta元素可視區
默認情況下，iPhone上的Safari會象在大屏幕的
桌面瀏覽器那樣顯示你的頁面，寬度達到了980像素，然後縮小內容以適應iPhone的小屏幕，因此用戶在iPhone看這個頁面時感覺字體就比較小了，
也比較模糊，必須要放大才能看得真切，對於一個普通的Web頁面似乎可以接受，但對於一個常用的應用程序就沒幾個人能夠受得了。
幸運的是可以使用特殊的Meta元素可視區進行糾正：
<meta
name="viewport" content="width=device-width"/>
這個元素通知瀏覽器使用設備的寬度作為可視區的寬度，而不是默認的980像素了，我們可以看看兩個不同的例子。
例3(鏈接：
viewport.html)顯示了一個簡單的段落元素，沒有Meta元素可視區，字體有點模糊。在iPhone中運行的實際情況如下圖所示。
圖 1 無可視區的顯示效果
例4(鏈接：
/viewport.html)包括了一個可視區元素，現在設備寬度只有320像素，字體也比前一個例子更清晰了。在iPhone中運行的實際情況如下圖
所示。
圖 2 有可視區的顯示效果
另外，你還可以手動設置device-width的值，例如，假設你的博客頁面的寬度是750像素，那麼桌面屏幕最佳大小就是800x600像素，例
5(鏈接：
/fixed750.html)顯示了一個刪減版本，如果你在iPhone中瀏覽它，你會看到980像素剩下的空間都填充了白色。
為了消除額外的空間，可以使用meta元素可視區將寬度設為780像素：
<meta
name="viewport" content="width=780"/>
例6(鏈接：/fixed750-viewport.html)顯示了meta元素可視區布局被固定後的效果。
Meta元素可視區的內容可以包括多個逗號分隔的值，如initial-scale –
用戶最初看到頁面時的放大級別，對於Web應用程序，一個常見的設置是：
<meta
name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
這個元素設置寬度為設備的最大寬度，禁止用戶放大和縮小