手機如何制作網頁
提問問題
列表
-
怎么把一個pc頁面自適應手機屏幕，自適應手機屏幕網站怎么做嗎
查看答案>>
-
css手機版頁面制作時如何讓背景圖片適應div的高度和寬度
查看答案>>
-
手機站是怎么做的？怎樣讓pc端網站做成手機站？
查看答案>>
-
電腦dw制作的網頁發(fā)送到手機中該如何觀看
查看答案>>
-
怎么制作網站的手機版
查看答案>>
-
怎么制作html5手機頁面？
查看答案>>
-
我用HTML5做手機網頁，如何設置字體大小以適合各種設備？
查看答案>>
-
如何在手機上制作自己的網頁
查看答案>>
怎么把一個pc頁面自適應手機屏幕，自適應手機屏幕網站怎么做嗎
無論是電腦還是手機，要做到自適應屏幕，其實都是一樣的。 首先，在網頁代碼的頭部，加入一行viewport標簽 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。即讓viewport的寬度等于物理設備上的真實分辨率，不允許用戶縮放。 其次：網頁寬度css一定要使用百分比width: xx%;，不能用絕對像素。當然可以用width:auto; 第三，流動布局 .left{float: left;width: ***%;} 第四，選擇加載css 這是自適應的關鍵部分 .abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} } /* 設置了瀏覽器寬度不小于1201px時 abc 顯示1200px寬度 */ @media screen and (max-width: 1200px) { .abc {width: 900px} } /* 設置了瀏覽器寬度不大于1200px時 abc 顯示900px寬度 */ @media screen and (max-width: 901px) { .abc {width: 200px;} } /* 設置了瀏覽器寬度不大于901px時 abc 顯示200px寬度 */ @media screen and (max-width: 500px) { .abc {width: 100px;} } /* 設置了瀏覽器寬度不大于500px時 abc 顯示100px寬度 */ 需要注意是CSS代碼順序，由大到小排版CSS（判斷瀏覽器寬度越大越放前），這樣是因為邏輯關系，@media 判斷CSS排錯將導致判斷失效。 第四，圖片自適應 img { max-width: 100%;} 老版本的IE不支持max-width，所以只好寫成：img { width: 100%; } 篳五、采用相對字體大小 字體也不能使用絕對大小（px），而只能使用相對大?。╡m）。 這里最重要的，是第三條和第四條，也就是采用流動布局和css選擇加載。祝你好運！別拿些復制的過來
css手機版頁面制作時如何讓背景圖片適應div的高度和寬度
可以使用background-size: cover來適應DIV元素的高度和亮度。代碼如下：<style>
div{background:url(圖片地址) no-repeat;width:100%;height:auto;background-size:cover;}
</style>
<div>這里是內容</div>background-size 屬性規(guī)定背景圖像的尺寸,IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。
電腦dw制作的網頁發(fā)送到手機中該如何觀看
有多種查看方式：1 使用手機瀏覽器查看。將網頁保存到SD卡中，用瀏覽器打開就可以了。2 使用郵箱打開。將網頁郵件發(fā)送到自己的郵箱里，在手機上打開郵箱進行查看。如果是制作圖文并茂的郵件，可以到“肯為旎DIY”去看看，制作更簡單和高效。
可是我建了一個文件夾
里面有圖片音樂和
HTML
如果是文件夾，可以將文件夾復制到手機的SD卡中，然后用瀏覽器打開就可以了。順便說一句，干嗎用手機打開呢？如果是測試效果，計算機也可以的，請使用FF瀏覽器的響應式視圖方式打開即可。
不死，我制作好了，現在要測試，發(fā)到別人的手機上，可是我制作好的是一個文件夾，里面有音頻和圖片，全發(fā)手機上面只顯示網頁上的字，不顯示圖片和音頻
這主要是圖片和音頻的URL地址不正確造成的，有兩種方法解決：一是使用相對地址；二是使用網上的地址（先將圖片和音頻上傳到網址）。
怎么制作網站的手機版
做手機網站的方法一下幾種1、模板站，下載手機網站模板，然后將內容和PC站點通用，這樣移動設備訪問網站時就會自動轉入到手機站的模板。你也可以解析一個m開頭的域名作為手機站的域名，有利于搜索引擎抓取。2、自適應網站，這種網站不需要另做手機站，因為網站的自適應，會根據你使用的設備分辨率來調整網頁的排版和內容顯示。3、H5快速建站，現在有很多服務商支持H5快速建立手機網站，只需要你把內容上傳，這些服務商就會將這個網站做出來，比較方便快捷，缺點就是免費的都有廣告，而且不支持使用自己網站的域名。4、用代碼寫出來的手機站，這種網站就是屬于靜態(tài)網站，所有的內容都是通過代碼寫進去的，想要更改內容比較麻煩。優(yōu)點就是一步到位，想要什么效果都能達到。5、手機直達頁，這種可以說是一個網站，也可以說是一個網頁，這種手機站比較適合推廣使用，將所有企業(yè)的推送產品放在這個頁面上，然后完美的展示出來，用戶點擊之后可以進入購買頁面或者直接進入咨詢頁面，可以更有效的提高轉化效果。
我用HTML5做手機網頁，如何設置字體大小以適合各種設備？
HTML5做手機網頁所用的字體可以有2種單位：1）使用px 像素：使用14號字體即可2）使用em ：隨著屏幕大小而改變1em=16px如果只是做手機設備的話，完全可以使用px像素就可以了。不過不要使用12px 在手機上顯示太小了，用戶看不清楚。一般使用 14px 或 16px 。
如何在手機上制作自己的網頁
在手機上制作自己的網頁的方法一、工具/原料html頁面vs2008二、方法/步驟1、打開vs2008了。點擊【文件】【新建文件】【常規(guī)】【HTML頁面】【打開】。2、如圖所示，新建了一個空白的html頁面，拆分視圖。3、設置頁面body樣式信息。【-webkit-touch-callout: none; -webkit-text-size-adjust: none;】是防止用戶復制和保存圖片,只支持iphone、ipad、android4、設置頁面的寬度和高度。【.page-content{background:-webkit-linear-gradient(#2F5A53,#6CA199); top:352px; min-height:550px;_height:550px;width:640px; }】5、【關鍵點】。新建一個div標簽，樣式使用page-content。6、在段落標記<p>里面輸入文字信息，這里就不排版了，主要是教大家方法，然后保存網頁。7、將網頁上傳到服務器目錄下。8、輸入網站域名，在電腦上訪問可以看見如圖所示效果，只有左側部分。9、使用手機訪問，得到如圖所示效果，就不會像直接書寫html代碼一樣文字很小。10、完整代碼。【<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no" /> <title>不落淚的</title></head><body ><div style="margin: 0px; padding: 5px; border: 1px solid rgb(204, 204, 204); max-width: 100%; font-size: 16.363636016845703px; font-family: 宋體; line-height: 26.666667938232422px; background-color: rgb(248, 247, 245); word-wrap: break-word !important; box-sizing: border-box !important;"><span style="max-width: 100%; word-wrap: break-word !important; box-sizing: border-box !important; color: rgb(57, 57, 57); font-family: 微軟雅黑; font-size: 14px;">不落淚的</span></div></body></html>】
