1. HTML網頁如何完美的適配到移動設備上
1、在已安裝的電腦桌面新建一個Word文檔（演示文稿以Office2007系列為主），然後打開新建的文檔，輸入文字。
2. 製作的網頁要兼容手機瀏覽器的話,需要注意什麼細節
應該根網站製做是一樣的。注意寫標準的CSS就可以了。手機不過是小一點而已了。沒什麼特別
3. 前端用easyui寬架做的，有辦法適應手機屏幕嗎
不能很簡單的適配
現在的前端設計如果要同時適配PC和移動（手機、pad），是在設計階段就考慮好的，核心也不是js，而是css。
你的easyui前端既然已經開發好了，那肯定當時是沒考慮適配的，現在改成通用的比單獨做一套移動的還麻煩。
4. 前端開發網站怎樣適配手機端查看
加入：<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
///////////////////
隨著高端手機(Andriod,Iphone,Ipod,WinPhone等)的盛行，移動互聯應用開發也越來越受到人們的重視，用html5開發移動應用是最好的選擇。然而，每一款手機有不同的解析度，不同屏幕大小，如何使我們開發出來的應用或頁面大小能適合各種高端手機使用呢？學習html5
viewport的使用能幫你做到這一點……
viewport 語法介紹：
<!-- html document -->
<meta name="viewport"
content="
height = [pixel_value | device-height]
,
width = [pixel_value | device-width ]
,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi
| low-dpi] "
/>
width
控制 viewport 的大小，可以指定的一個值或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS
的像素）。
height
和 width 相對應，指定高度。
target-densitydpi
一個屏幕像素密度是由屏幕解析度決定的，通常定義為每英寸點的數量（dpi）。Android支持三種屏幕像素密度：低像素密度，中像素密度，高像素密度。一個低像素密度的屏幕每英寸上的像素點更少，而一個高像素密度的屏幕每英寸上的像素點更多。Android
Browser和WebView默認屏幕為中像素密度。
下面是 target-densitydpi 屬性的 取值范圍
device-dpi –使用設備原本的 dpi 作為目標 dp。 不會發生默認縮放。
high-dpi – 使用hdpi 作為目標 dpi。 中等像素密度和低像素密度設備相應縮小。
medium-dpi – 使用mdpi作為目標 dpi。 高像素密度設備相應放大， 像素密度設備相應縮小。 這是默認的target density.
low-dpi -使用mdpi作為目標 dpi。中等像素密度和高像素密度設備相應放大。
<value> – 指定一個具體的dpi 值作為target dpi. 這個值的范圍必須在70–400之間。
<!-- html document -->
<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="viewport" content="target-densitydpi=high-dpi" />
<meta name="viewport" content="target-densitydpi=medium-dpi" />
<meta name="viewport" content="target-densitydpi=low-dpi" />
<meta name="viewport" content="target-densitydpi=200" />
為了防止Android Browser和WebView
根據不同屏幕的像素密度對你的頁面進行縮放，你可以將viewport的target-densitydpi 設置為
device-dpi。當你這么做了，頁面將不會縮放。相反，頁面會根據當前屏幕的像素密度進行展示。在這種情形下，你還需要將viewport的width定義為與設備的width匹配，這樣你的頁面就可以和屏幕相適應。
initial-scale
初始縮放。即頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數。例如，如果你設置初始縮放為「1.0」，那麼，web頁面在展現的時候就會以target
density解析度的1:1來展現。如果你設置為「2.0」，那麼這個頁面就會放大為2倍。
maximum-scale
最大縮放。即允許的最大縮放程度。這也是一個浮點值，用以指出頁面大小與屏幕大小相比的最大乘數。例如，如果你將這個值設置為「2.0」，那麼這個頁面與target
size相比，最多能放大2倍。
user-scalable
用戶調整縮放。即用戶是否能改變頁面縮放程度。如果設置為yes則是允許用戶對其進行改變，反之為no。默認值是yes。如果你將其設置為no，那麼minimum-scale
和 maximum-scale都將被忽略，因為根本不可能縮放。
所有的縮放值都必須在0.01–10的范圍之內。
例：
(設置屏幕寬度為設備寬度，禁止用戶手動調整縮放)
<meta name="viewport" content="width=device-width,user-scalable=no"
/>
(設置屏幕密度為高頻，中頻，低頻自動縮放，禁止用戶手動調整縮放)
<meta name="viewport"
content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
5. CSS如何讓網站適應手機屏幕
並不是加了meta標簽，網站就會自適應手機屏幕了，還需要更改一些樣式。
你圖片上顯示搜索框的寬度是568px，但是頁面的寬度只有375（iPhone X的頁面顯示寬度），所以肯定會超出去，發生顯示不全的情況
這種情況你可以使用media標簽來做自適應
@mediaonlyscreenand(max-width:400px){
.search{width:300px}
}上面代碼的意思是當頁面寬度小於400px的時候 就讓.search的寬度變成300px。你可以吧上面的代碼加到你的css裡面看一下效果
6. 前端使用了許多bootstrap的表格，該怎麼兼容手機頁面
bootstrap的話，可以通過設置柵格化布局裡面的屬性在控制在不同尺寸下網頁的布局。
尺寸大於1170px的用 .col-lg- 的前綴
尺寸在970-1170px的用 .col-md- 的前綴
尺寸在750-970px的用 .col-sm- 的前綴
尺寸小於750px的用 .col-xs-
7. pc 網站有了，怎麼做手機適應的網站
一、PC網站自動適配手機網頁的7個步驟
一般來說，移動適配主要通過底層的web技術開發手段來完成，下面馬海祥將通過移動適配技術的角度來告訴你通過7個步驟來完成一個PC網站向移動設備的跳躍！
1、允許網頁寬度自動調整
「自適應網頁設計」到底是怎麼做到的？其實並不難。
首先，在網頁代碼的頭部，加入一行viewport元標簽，viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9，對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用絕對寬度
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素，這一條非常重要。
具體說，CSS代碼不能指定像素寬度：width:xxxpx;
只能指定百分比寬度：width:xx%;或者width:auto;
3、相對大小的字體
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
body{
font:normal100%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）。
4、流動布局（fluidgrid）
「流動布局」的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main{
float:right;
width:70%;
}
.leftBar{
float:left;
width:25%;
}
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
另外，絕對定位（position:absolute）的使用，也要非常小心。
5、選擇載入CSS
「自適應網頁設計」的核心就是CSS3引入的MediaQuery模塊，它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。
media=」screenand(max-device-width:400px)」
href=」tinyScreen.css」/>
上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width:400px），就載入tinyScreen.css文件。
media=」screenand(min-width:400px)and(max-device-width:600px)」
href=」smallScreen.css」/>
如果屏幕寬度在400像素到600像素之間，則載入smallScreen.css文件。
除了用html標簽載入CSS文件，還可以在現有CSS文件中載入。
6、CSS的@media規則
同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。
@mediascreenand(max-device-width:400px){
.column{
float:none;
width:auto;
}
#sidebar{
display:none;
}
}
上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
7、圖片的自適應（fluidimage）
除了布局和文本，自適應網頁設計還必須實現圖片的自動縮放。
這只要一行CSS代碼：
img{max-width:100%;}
這行代碼對於大多數嵌入網頁的視頻也有效，所以可以寫成：
img,object{max-width:100%;}
老版本的IE不支持max-width，所以只好寫成：
img{width:100%;}
此外，windows平台縮放圖片時，可能出現圖像失真現象。這時，可以嘗試使用IE的專有命令：
img{-ms-interpolation-mode:bicubic;}
或者，EthanMarcotte的imgSizer.js。
addLoadEvent(function(){
varimgs=document.getElementById(「content」).getElementsByTagName(「img」);
imgSizer.collate(imgs);
});
最好還是做適配解析度的圖片，有很多方法可以做到同樣效果，伺服器端和客戶端都可以實現（具體可查看馬海祥博客《根據訪問設備自動識別展示手機站或PC站的方法》的相關介紹）。
二、適配最常見的操作方法
據馬海祥觀察，PC站和手機站匹配最常用的幾種方法是移動適配、JS跳轉、Meta聲明、302規則等等，由於每種方法的操作方式不同，產生的效果也不同，具體的優缺點也需要區別對待，在此，馬海祥就給大家比較一下這4種適配方法的優缺點以及需要注意的地方：
1、移動適配
現在很多搜索引擎都提供移動適配的功能，例如網路的開放適配和360的移動適配，利用網路站長工具提交PC頁-手機頁對應關系Sitemap，或者利用360站長工具提交PC頁-手機頁對應關系txt就能實現PC站內容和手機站一一適配。
這樣做的優點是只需要在搜索引擎工具提交資料，無需對站點本事做改動，而且網站內容一一對應，並不只局限於網站首頁。
缺點就是只能在網路或者360移動搜索中生效，其他沒用提交適配文件的搜索中就無效了。
2、JS跳轉
JS跳轉對於某些行業來說有著重要的作用，尤其是對於用戶轉換率網站首頁較高的網站，只需要在網站的頭部加一段JS代碼判定是否是移動端訪問，然後所有的流量就會全部流向手機站的主頁。
JS跳轉的優點是適用於所以的移動搜索，並不局限於網路和360，可以提高用戶的轉換率。
缺點是難以實現每個頁面的一一對應，而且容易被某些搜索引擎判定作弊，從而受到懲罰。
3、Meta聲明
Meta聲明的格式一般為，站長可以將這段代碼加在PC站的頭部，由Meta信息來指明該PC頁對應的手機頁的URL，以及該URL對應頁面的格式。
Meta聲明的優點是代碼簡單易懂，操作方便。
缺點是只能在網路移動搜索中生效，對於其他搜索引擎無效（另外，還可以使用網路轉碼，具體可查看馬海祥博客《網路轉碼後的手機網站頁面是否有利於SEO優化》的相關介紹）。
4、302規則
302規則指的是，當判定移動端訪問網站時，302臨時跳轉到一個網址(手機站)，例如可以在htaccess文件里加上一段判定手機的代碼，做個302重定向。
這樣做的好處是，不需要再額外在網站的前端代碼中加任何東西，也不需要向搜索引擎提交規則，可是據測試，有可能會導致PC站被降權。
雖然302是暫時性的重定向，但過於頻繁的302是很有可能給網站帶來不利的影響的，具體的尺度需要站長自己去把握。
以上4種適配方法是接觸的最為常見的操作方法，通常PC站做了以上處理後，一段時間以後移動端搜索出來的結果，下面匹配的網址就變成了移動站網址，不過標題還是PC站標題。
至於到底哪種方法更好，更傾向於第一種，畢竟網路移動搜索占據著網站的大部分流量，而且用戶體驗度也最好。
8. 做個手機頁面怎麼才能適配不同的手機
一般來說，iH5的手機案例默認的尺寸是640*1040px，也就是iPhone6 plus的尺寸，我用的正是iPhone6 plus，所以我做案例時沒出現過這類問題，而你遇到案例呈現不完整的情況我想應該是手機型號的不同導致的。
你可以設置舞台或者設備的屬性，舞台裁剪為no，如果用的是短款手機觀看作品，有滾動條也可以看到完整的案例。
如果你想要實現完美適配，可以做三個設備，寬度均為640，高度可設置為1040（iPhone6 plus）、1008（iPhone5s和大部分Android手機）、832（iPhone4s）。
希望我的回答對你有幫助
9. 前端使用了許多bootstrap的表格，該怎麼兼容手機頁面
bootstrap的柵欄功能可以自動適應手機端,放心使用,不需要再更改
10. 網頁設計中，如何讓頁面自適應手機端
一般來說，通過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，識別當前頁面的解析度，來給出樣式，這種比較好也比較復雜，代碼量很多但是一般沒有兼容問題。