導航:首頁 > 萬維百科 > 手機端網頁設計樣式

手機端網頁設計樣式

 發布時間：2020-12-22 06:11:10

1、我是做網頁設計的，UC瀏覽器手機版是不是不支持很多css樣式呢

如今的移動端的來瀏覽自器對於樣式的兼容性已經有了很大的改善了，css基本上都是支持的，只有css3部分樣式不支持而已。而如果有樣式錯亂，那麼在排除掉css3的情況下，那麼首先要檢查一下是不是有書寫格式錯誤、不規范;但是UC瀏覽器是個特例：它會纂改一些樣式，具體如下：
1.不支持font-family屬性，也就是說，在UC瀏覽器你只能看到一種字體；
2.不支持font-szie屬性，也就是說，在UC瀏覽器你只能看到一樣大小的字體；
3.不支持width、height、padding、margin、line-height屬性，也就是說，在UC瀏覽器只能通過p、br等HTML標簽來換行以達到字元上下間隔；
4.不支持固定像素的寬度，100%顯示頁面，也就是說，在UC瀏覽器始終將看到的是「滿屏的」；
5.不支持浮動、層疊布局，float和position屬性無效，也就是說，在UC瀏覽器你只能看到「左對齊」。
6.支持background-color，但不支持background-image，也就是說不支持CSS背景圖顯示，在UC瀏覽器你只能看到背景色。

2、關於手機端網頁設計html

要不你得把所有代碼發出來，大家看下才知道，要不你上傳到空間，網址發出來大家看一下，這樣子是看不出什麼問題的

3、手機端網頁設計

meta標簽是位於<head>標簽中的一個設定網頁的重要元素標簽，
第一個meta標簽代碼一般用於手機端，因為每個手機型號的屏幕不一樣，所以這個代碼可以讓網頁自己適應手機端的屏幕大小顯示。
第二個meta標簽代碼代表電話號碼，手機號碼，並檢測手機號碼的格式，手機可以識別點擊然後自動撥號。

4、手機html網頁和電腦上的html網頁在製作上有什麼區別

1.導航設計

手機端頁面導航應當包括用戶必要的內容，刪除屏幕上不必要的鏈接，假如鏈接的詳細頁面內容不是用戶想要的，用戶不會點擊，也就沒必要設置。其中建立導航功能鍵的時候，其中以回到首頁、回到上一頁這兩個最為重要。

2.網站名稱或logo的設計

手機網頁的頂部沒有標題欄或地址欄，相應地，也就沒有網站標題和圖標。所以設計頁面的時候應該讓用戶知道，他們現在所瀏覽的網站名稱或logo，這對塑造品牌也很重要。 

3.頁面排版

從用戶角度來說，他們希望閱讀所有的內容，所以我們進行內容呈現，只是用隔斷、重組、引語、線條或其他視覺方案來讓這些內容更容易訪問，使這些板塊顯得更都雅。

4.利用手機的天生優勢

手機有著許多傳統電腦所沒有的優勢，其中最大的優勢就是移動力，因此手機版網頁應該要特別發揮這些特性，讓手機網頁具有一般網頁更多的優勢。如：

移動定位：大部分的智能設備都有導航、定位的機制，可以讓客戶主動找到企業的位置。

移動聯系：如果用使用的是行動電話，可以立即發話;或者直接跳轉到通訊工具在線聊天;

鄰近地點：如果企業有很多據點，請告訴用戶，在他附近有哪一些地點是便於他能夠抵達的。

5、手機網頁設計多大好?

wap頁面設計一般都是寬度自適應的，最窄以兼容320px為標准，最寬1280px為標准，
一般的智能手機寬度都是320，480，640這些，
其中iPhone就不用說了吧，必須是480px，
其他三星啊，htc啊什麼的，各類解析度都有，基本不會比480低，
但是之前剛開始的一些智能手機大部分都是320，所有要兼容320哦~~~

6、手機網頁應該怎樣設計?

一、選用合適的字體。

手機網頁設計成功離不開排版，排版應該獲得和圖片同樣的重視。雖然可供選擇的字體很多，設計師要考慮的方面很多，比如說，目標客戶和客戶公司的性質。為手機網站頁眉和內容選用合適的字體是必不可少的，無襯線字體和有襯線字體通常會為設計帶來良好的效果。除此之外，你還可以結合其它字體，專為孩子和女性打造網站。

二、選擇合適的配色方案。

任何手機網站的設計都離不了合適的配色方案，這對創建一個整潔干凈的網站同樣適用。堅持使用淡色和非彩色的投影對成功設計一個簡潔網站大有裨益。淺色的投影可以幫助用戶把焦點轉向網站內容。標志使用黑色和較深的投影，手機網頁中的頁眉和導航元素使用淺色背景，這些都是不錯的案例，並沒有規定在簡潔網頁設計中不能使用大膽的顏色，但是這樣的顏色要小心，剋制地使用。有時候，手機網站有必要使用深色背景色來吸引某些目標用戶。比起漸變色，有些手機網站更鍾愛純色。如果你的手機網站非得要使用紋理和漸變色，也不要用得太過火。

三、提高頁面載入速度，手機網站以簡潔為主。

一般來說，手機網站在用戶下載和瀏覽時要比PC端網站的速度慢得多，頁面東西太復雜，會耗掉用戶等待網站載入的耐心，尤其是導航欄要簡短清晰，能夠快速地指引用戶瀏覽網站的深層信息。對於網站內容來說，簡潔突出重點就好，所謂的內容越豐富越好已不適用於手機網站了。

四、避免使用彈窗。

無論是出於方便用戶聯系網站客服還是做些小廣告的目的，都要盡可能避免彈出窗口的應用，手機網站本來載入速度就慢，再添加這些窗口，必然會影響用戶體驗，阻礙用戶瀏覽網站的視線，進而佔用用戶流量，引起反感而放棄對網站的繼續訪問。

五、手機網站圖片要適配設置。

從手機上瀏覽網站必然沒有那麼方便，操作也不如PC端靈活自如，前面也說到了使用網站設計技術可以解決網站適應屏幕的問題，網站圖片也不例外，但為了用戶能將頁面使用圖片的地方看得更加清晰，可採用整站縮放的模式，而不是用戶點擊單張圖片的縮放模式，當然，手機網站能少用圖片是最好的。 六、網站操作簡單化。關於新頁面的打開方式，最好採用當前頁面顯示的方式來設計，以免新窗口造成網站資源佔用的負擔，同時對於出現網站錯誤的現象最好設置提醒，讓用戶快速找到頁面出口進行跳轉，而不是不斷地進行返回操作。

七、互動式的互動行為。

用戶在移動客戶端都喜歡進行留言，分享功能。特別是看到一篇很棒的帖子都會選擇分享到朋友圈或者空間中，讓朋友也參與裡面。例如現在比較流行的做就是做微信公眾號大咖們，往往一篇帖子都會造成幾千人的持續瀏覽、點贊或者分享內容，粉絲喜歡中這種參與行為，因為這種圈子拉動粉絲在持續發酵中，用戶慢慢都會捨不得離開。

7、手機端網頁設計尺寸多少

iPhone手機網頁的設計尺寸

iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI

安卓網頁的設計尺寸

320dp：一個普通的手機屏幕（240X320，320×480，480X800）
480dp：一個中間平板電腦像（480×800）
600dp：7寸平板電腦（600×1024）
720dp：10寸平板電腦（720×1280，800×1280）

ipad網頁的設計尺寸

iPad第三代第四代尺寸是2048x1536px解析度是264PPI
iPad第一代第二代尺寸是1024x768px解析度是132PPI
iPad Mini尺寸是1024x768px解析度是163PPI

8、網頁設計中，如何讓頁面自適應手機端？

一般來說，通過CSS3，可以直接對不同解析度下的樣式進行定義，比如如下的代碼。
/* PC或中大型筆記本設備 desktop */ @media all and (min-width: 1201px) { .title-desktop{ display: block !important; } .container { width: 1100px; } } /* 中小型筆記本或大平板 laptop */ @media all and (min-width: 980px) and (max-width: 1200px) { .title-laptop{ display: block !important; } .container { width: 920px; } }
但是上面的方法，可能不會兼容老版本ie。
所以也可以通過js，識別當前頁面的解析度，來給出樣式，這種比較好也比較復雜，代碼量很多但是一般沒有兼容問題。

9、css手機版頁面製作時如何讓背景圖片適應div的高度和寬度

具體步驟如下：

1、輸入position:fixed; top: 0; left: 0;使整個div固定在屏幕的最上方和最左方。

2、輸入width:100%;height:100%; min-width: 1000px;這個可以適合div的高度和寬度，而min-width是為了實現讓屏幕寬度在1000px以內時，div的大小保持不變。

3、輸入background-size: cover;-webkit-background-size: cover;-o-background-size: cover;使圖片隨屏幕大小同步縮放，但是有部分可能會被裁切，不過不至於會露白，下面兩句是為chrome和opera瀏覽器作兼容。

4、輸入background-position: center 0;使圖片的位置，居中，靠左對齊。

10、急求DIV CSS自適應布局手機網頁設計的模版

這個模版可以 當你縮小瀏覽器窗口時 可以看到它的樣式的變化 ~~手機也適用

與手機端網頁設計樣式相關的知識