做響應式網站移動端寬度最小多少

Ⅰ 網頁設計的寬度一般為多少應該怎麼把握

網路統計流量研究院對於2017年上半年的解析度使用情況統計得出。

排名第一的是360×640，這是豎屏，一般在醫院、學校中才能見到，暫且不談。

排名第二的是1920×1080，佔比13.07%。

1366×768排第三，佔比6.32%。這說明現在主流的電腦解析度是1920×1080。

排名第七的解析度，1024×768，是最小的電腦尺寸了，僅佔3.13%，很少有人使用。在做pc端的網頁設計時，不用考慮這個尺寸，而應在做pad端和手機端的適配時，將其納入考慮。

而更高級的響應式網站應該是在嚴格的柵格規范下，適應於不同寬度，確保各寬度下的展示效果。但這樣的成本也會相應增加，在開發網站時，需綜合考慮實際需求和開發成本。time（《時代周刊》官網）是個很好的響應式網頁案例。

(1)做響應式網站移動端寬度最小多少擴展閱讀

網頁設計中的注意事項：

1、網頁設計的尺寸標准：

面向1024-768顯示器解析度開發的網頁尺寸，寬910px；

面向800-600顯示器解析度開發的網頁尺寸，寬778px；

2、網頁設計中的畫布設定：

尤其注意解析度為72 像素/英寸。

3、設計中的網頁字體問題

中文字體：尤其注意「設置消除鋸齒的方法」選項要選擇「無」。

宋體是最常用的網頁字體，12px 是中文操作系統可以表現的最小的字體，內容。

文字大小一-般用兩種，12px 或14px(現在的新的vista據說能表現10px的中文字，但現在使用並不多)。

英文字體：其中英文字體最小表現為10px 字verdana字體是大多數網頁使用的英文字體，比起arial字體更美觀和均衡。

效果圖：

網頁效果圖中的網頁字體，雖然在最後製作網頁的過程中不需要裁剪。但做為設計中不可分割的重要元素，一定要認真使用，因為你不單要設計文字與整體網頁的關系，還要設計字體的樣式表顏色。

Ⅱ 現在手機解析度已經達到1000px以上，接近電腦的解析度，那麼響應式網站如何區分手機和電腦來自適應寬度

顯示解析度（屏幕解析度）是屏幕圖像的精密度，是指顯示器所能顯示的像素有多少。由於屏幕上的點、線和面都是由像素組成的，顯示器可顯示的像素越多，畫面就越精細，同樣的屏幕區域內能顯示的信息也越多，所以解析度是個非常重要的性能指標之一。可以把整個圖像想像成是一個大型的棋盤，而解析度的表示方式就是所有經線和緯線交叉點的數目。顯示解析度一定的情況下，顯示屏越小圖像越清晰，反之，顯示屏大小固定時，顯示解析度越高圖像越清晰。

Ⅲ html移動端頁面、圖片多少寬度最合適

現在移動端頁面圖片規格640用的會比較多，也比較被人們接受，所以建議還是640的比較合適，但因為移動端的規格不一樣，圖片的最優尺寸也可以改變的。

Ⅳ 響應式布局多少寬到多少寬調用這個css樣式怎麼寫

響應式布局多少寬到多少寬調用這個css樣式怎麼寫

響應式布局就是根據瀏覽器顯示區域大小不同顯示不同的樣式，比如說你的瀏覽器是電腦1366*768就顯示寬屏布局（如左右布局），如果是手機寬480px，就顯示適用於手機的布局（如上下布局）。 響應式布局和一般是使用css3的@media屬性，設置當瀏覽器...

用bootstrap做的響應式布局的樣式怎麼改

響應式設計的初衷是對於不同屏幕屬性的設備進行近乎一致的呈現，當然，是使用『一份』代碼，但是，問題來了，不同設備的網路環境不同（強弱網），對樣式表支持度不同（客戶端屬性），所以如果採用響應式的思路來玩，這里我們適配主要的受眾設備即可，以下舉例以常見設備為主：PC高分屏，PC常規屏，各種平板，各種手機以及其打開頁面的client，特別的設備，諸如閱讀器。
首先根據自己的主要受眾的設備屏幕屬性完成你的原型設計，包括以上的設備中腳本渲染的模塊。
使用真機，模擬器或者chrome開發模擬器中的device切換的功能（審查元素-最上面一條，左邊三個圖標中的手機按鈕），以下重點講第三種（前兩種沒啥可講的吧...）

css定位，怎麼響應式布局雙欄

響應式雙欄。
應該是一般固定一般不固定的吧。
左邊固定：
左邊浮動+margin， 右邊width 100%
右邊固定：
左邊padding ，右邊浮動。

bootsrtp響應式布局在react 中怎麼用

如何使用Bootstrap
針對 Bootstrap 的 HTML
清單 • 是一個有用的框架 HTML 文件，用於結合使用 Bootstrap 與一個固定布局和響應特性：
清單 • 用於 Bootstrap 項目的基本框架 HTML 文件 (listing1.)
縮小版本
在 Bootstrap 下載中，請注意，每個 CSS 和 JavaScript 文件有兩個版本可用(例如 bootstrap.js 和 bootstrap.min.js)。第一種形式是一個常規文件，第二種形式是壓縮文件或 「縮小文件」。就像在本文中一樣，使用縮小版本即可實現最有效的頁面載入。

bootstrap響應式布局要花多少時間學習

基本的布局,你看著手冊2天久熟練了,主要是插件,以及熟練運用,那你就需要多花些時間了,關鍵看需求,要求多又嚴,那你進步空間就大,這個因人而異,不要擔心,慢慢來,會學好的,不懂得網路一下,基本都有

響應式布局該怎麼設計

你這問題太廣泛了！
響應式布局屬於CSS3中的一種，只是由於移動端的興起才流行起來的而已！
你這個問題我可以直接給你來一套系列課程了都！
網路知道根本寫不下，也不可能有那時間精力來寫

為什麼CSS響應式布局不是主流

一、div+css布局的好處：
1.符合W3C標准，代碼結構清晰明了，結構、樣式和行為分離，帶來足夠好的可維護性。
2.布局精準，網站版面布局修改簡單。
3.加快了頁面的載入速度（最重要的）（在IE中要將整個table載入完了才顯示內容）。
4.節約站點所佔的空間和站點的流量。
5.用只包含結構化內容的HTML代替嵌套的標簽，提高另外搜索引擎對網頁的搜索效率。
二、table布局的好處（table布局也不是一點用的沒有，這點是毋庸置疑的）
1.容易上手。
2.可以形成復雜的變化，簡單快速。
3.表現上更加「嚴謹」，在不同瀏覽器中都能得到很好的兼容。
綜合上面對兩種不同網頁布局的分析，大家也很顯然看得出HTML+CSS的布局是很占據優勢的，這也是現在HTML+CSS成為主流的原因吧。

響應式布局就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本

如何通過css3進行響應式布局

寬度最好用百分比寫，然後布局不一樣的時候用
@media (max-width: 1140px){
}

Ⅳ 網頁設計合適的頁面尺寸是多少

網頁設計選用的解析度是72像素，使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計，一般採用全屏展示和兩側留白的方式。
全屏展示，是整個網站看起來大氣一些，但是布局要合理安排，不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸，能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域，內容限時區域在好控制在1000px-1200px。

Ⅵ 響應式網站有什麼優缺點

其實今天安徽碼農科技之所以寫這個響應式網站是因為近兩年響應式網站確實很火，很多客戶通過業務員的介紹感覺神乎其神，甚至網站業務員說得自己都相信了，把自己都騙了，覺得響應式無所不能，非常完美。其實響應式並不是沒有缺點，准確的說也有很多致命的缺點。

什麼是響應式網站?

響應網站設計應根據用戶使用的設備的解析度大小進行相應的響應與調整，最大限度滿足不同設備用戶體驗需求。響應式網站設計就是一個網站能夠兼容多個終端，不需要為每個終端做一個特定的版本。簡單地理解：一個響應式網站＝手機網站＋pad端網站＋PC網站。具體的實現方式由多方面決定，包括彈性網格、彈性圖片、CSS媒體查詢（media query）的使用等。

彈性網格（flexible grids）

可基於屏幕解析度擴展或拉伸內容。

彈性圖片（flexible grids）

在小屏幕上可縮小尺寸，並可擴展大最大尺寸以支持大屏幕。

媒體查詢（media queries）

是放在站點HTML和樣式表中的代碼段，用來收集設備顯示能力的信息以支持多種形式的界面。

下面安徽碼農科技就給大家總結一下響應式網站的優缺點吧 。

響應式網站優點

1:用戶體驗友好

隨著電腦尺寸多元化，智能設備（pad/智能手機）普及化，在當下追求用戶體驗至上的時代（2016年），之前網站普遍使用固定的寬度（960px或1000px）逐漸滿足不了現在不同設備與不同解析度需求。在高解析度電腦寬屏顯示器上，兩邊留白過多。在手機上顯示，內容顯示過小，用戶為了看清楚，首先需要放大界面，再左右拖拖界面。響應式網站可以根據不同終端、不同尺寸和不同應用環境，自動調整界面布局、展示內容、內容大小，提供非常好視覺展示效果，一致性友好體驗。

2:SEO友好

由於響應網站在不同終端有友好的界面展示效果，用戶可以與網站一直保持聯系，比如URL不變積累分享；通過單一的URL地址收集所有的社交分享鏈接最佳化搜索用引擎。搜索引擎也在變得越來越聰明，它們足夠智能可以完成移動網站和桌面網站的連接。

3:多個網站只需一個後台即可完成全部網站維護，無需額外增加負擔。說到這里你也許會說不做響應式的網站，做個手機站也可以數據同步，一個後台。說得非常對，但是這只限於維護一般的新聞內容與產品等，並不是所有內容都可以一站同步。比如網站banner上與一些特定地方的圖片尺寸，就需要分兩次裁剪吧。

響應式網站缺點

1:對低版本瀏覽器兼容性不友好

對於老版本瀏覽器支持不好，這是一個致命的問題。老版本瀏覽器上打開響應式網站會經常出現圖片顯示不全，排版錯亂等情況。

2:靈活性有所欠缺

基於不同終端的設備屬性不同，對產品用戶體驗要求就會截然不同。內容比較多帶有功能性的網站不適合做響應式網站設計，如：電商類型網站，寬屏的pc端內容如果全部要在手機端進行展示，勢必導致手機端的界面非常長，需要根據手機端屬性進行重新信息框架設計，這樣對響應網站要求非常高，實現難度與成本非常高。但是大型網站為了提高用戶體驗，通常做法，把高解析度寬屏網站最小的響應尺寸響應到1024px，不再適配手機端，手機端重新設計開發一套手機網站，簡單理解為2.5響應，如：電商網站亞馬遜、Calvin Klein、Nike、視頻網站Youtube等。

3:速度可能會變慢

由於響應式頁面是同時下載多套CSS樣式代碼，可能在手機上就下載PC、Pad的冗餘代碼，導致文件變大，影響載入速度。不過CSS樣式的代碼佔用內存相對圖片來說不算大，所以如果前端編程處理得好前提之下，這就不會影響網站載入速度。

4:開發成本較高

這個價格預算問題也往往是大家最關心的一個問題，說到這里大家可能覺得奇怪，響應式網站只是一個網站，為什麼比手機站與電腦站分開做兩個要貴！主要原因是：

一、企業網站定製最重要的成本就是人力成本，響應式網站製作需要資深設計師與資深程序員。而獨立製作各版本只需要普通設計師和普通工程師即可，但是響應式網站開發則必須資深設計師和資深程序員才能搞定，所以導致非常大的區別。資深設計師與程序員與普通的對比，這個道理大家都懂得，所以響應式網站價格較高。

二、響應式網站需要注意的細節太多，比如一個普通的JS效果，需要考慮3-4個終端的區別，編寫的JS代碼兼容性要非常好，根據以往開發經驗，這樣的細節注意要比普通網站多3-5倍。細節注意多了，開發周期就比較久，工時就是這樣上來的。

三、市面上很多響應式網站往往是不考慮網速的，在移動端和PC端需要載入的頁面數據往往是一樣多，導致的結果是，如果用戶採用2G3G的網速，不但速度慢而且耗流量。一個完美的響應式網站不應該是這樣的，但是做到這點需要的技術難度確是非常高，所以這也導致成本增加。

溫馨提示 ：企業是否做響應式網站，取決於對自身網站的定位。若是一般的企業官網，網站內容較少，預算又充足，對網站頁面要求較高的客戶可考慮做響應式網站。

若是想做功能型網站，網站內容較多，擇需要電腦手機分開做。其實大家稍微注意一下就明白了。響應式真的那麼好，為什麼京東不做呢，天貓淘寶不做呢。一是技術實現太難，二是確實不適合做這些功能型網站。

Ⅶ 移動端web在設計時寬度尺寸是多少合適

首先說現象，大家都知道移動端設備屏幕尺寸非常多，碎片化嚴重。尤其是Android，你會聽到很多種解析度：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640x960, 640x1136, 750x1334, 1242x2208。
不要被這些尺寸嚇倒。實際上大部分的app和移動端網頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規律可循。
像素密度
要知道，屏幕是由很多像素點組成的。之前提到那麼多種解析度，都是手機屏幕的實際像素尺寸。比如480x800的屏幕，就是由800行、480列的像素點組成的。每個點發出不同顏色的光，構成我們所看到的畫面。而手機屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。剛好兩倍，然而兩款手機都是3.5英寸的。

Ⅷ 建設網站時，網頁大小應該設置成多少

A,一般顯示解析度 800*600 1024*768 1280*768 1440*900設 計中主要考慮寬度，因為盡量不要在瀏覽器中出現橫向的滾動條，當然你要是專門為了做一個橫向寬的版面那另當別論，所以除去瀏覽器邊欄的寬度，還有滾動條的 寬度，剩下多少你自己要知道是多少，頁面經常還有兩側浮動廣告，還要留出位置，素以最終的大小，你自己在設計之前，現在紙上上畫一下，計算一下，然後再動 工，具體數值，你上網路搜索一下瀏覽器的具體寬度參數。B,一般製作畫布的尺寸1002px*768或1003px*768現在電腦顯示器幾乎都是寬屏，在不同解析度的效果都要考慮到

Ⅸ HTML5怎麼製作響應式網頁

1.調整視口

代碼實例：

<!DOCTYPEhtml>
<head>
<metacharset="UTF-8"/>
<title>布局之路-移動端開發實例</title>
<metaname="viewport"content="width=device-width,user-scalable=no"/>
<linkrel="stylesheet"type="text/css"href="css/reset.css"/>
</head>
<body>
<divclass="wrap"></div>
</body>
</html>

代碼解析：由於使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。

2.確定設計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。

代碼實例：

<styletype="text/css">
html{
font-size:42px;
}
</style>

3.浮動布局

各個區塊都是浮動的，不是固定不變的。為了能自適應各個窗口。

代碼實例：

.main{
float:left;
width:70%;
}
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}

float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。

4.通過媒介查詢，為不同設備載入相應樣式

有條件應用樣式：

<style>
@mediaalland(min-width:500px){...}
@media(orientation){...}
</style>

代碼解析：

第一行媒體查詢代碼指的是：為寬度大於等於500px的設備設置樣式。

第二行媒體查詢代碼指的是：為縱屏狀態（可見區域大於或等於寬度）下的移動端設備設置樣式。

有條件的載入樣式表：

<head>
<linkrel="stylesheet"href="wide.css"media="screenand(min-width:1024)"/>
<linkrel="stylesheet"href="mobile.css"media="screenand(max-width:320)"/>
</head>

代碼解析：

第一行媒體查詢代碼指的是：為寬度大於等於1024px的設備，載入wide.css文件。

第二行媒體查詢代碼指的是：為寬度小於等於320px的設備，載入mobile.css文件。

5.使用百分比和rem替換px

除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。

代碼效果對比：

/*使用固定像素*/
.box{
float:left;
width:658px;
font-size:72px;
text-align:center;
line-height:195px;
}
/*使用百分比和rem*/
.box{
float:left;
width:60.93%;
font-size:1.71rem;
text-align:center;
line-height:4.64rem;
}

代碼解析：

• 水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。

• 例如，父級寬度為1080px， 子級元素為197px，那麼子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的「分母」也有所不同，在開發時這個地方很容易出現問題，請務必注意。

• 垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。

Ⅹ 網頁設計的尺寸大小是多少，寬度應該是多少

其實也沒有硬性規定，但是為了兼容大多數瀏覽器一般是設置960px，隨著現在瀏覽器解析度的變化，已開始向著1000px,1200px寬度發展，例如淘寶(1000px）京東商城（1200px）。如果需要兼容不同瀏覽器尺寸，現在比較流行的做法是做成響應式的，即根據不同解析度顯示不同的尺寸，工作量也就隨之增加了。貌似國內的大網站也沒有使用。