導航:首頁 > 網站知識 > 如何讓網站適配電腦和移動端
如何讓網站適配電腦和移動端
發布時間：2022-07-07 16:56:46⑴ 怎樣低成本的實現網頁在移動端的適配
解決方案涉及到的知識點：
viewport
media query
Javascript window.matchMedia
響應式圖片
柵格布局
頂部導航
測試工具
iOS和Android自帶的瀏覽器都是基於webkit內核，所以我們可以使用viewport屬性和media query技術實現網站的響應性。
viewport
在<head>之中添加viewport元數據標簽。
width=device-width 實現屏幕適配，頁面繪制根據觸屏大小變化，保持一致。
initial-scale 表示初始縮放。
Js代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">
maximum-scale 表示最大縮放比例，1意味著不能進行縮放。
user-scalable=no 禁用頁面縮放（zooming）功能。禁用縮放後，用戶只能滾動屏幕，讓你的網站看上去更像原生應用。
注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！
Js代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
media query
根據不同的解析度，引用不用的css
Css代碼
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
Bootstrap3的實現 http://v3.bootcss.com/css/#grid-media-queries ，
以下是LESS方法的實現
Js代碼
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Javascript window.matchMedia
用CSS3解決的確很方便，但某些場景下仍然需要JS技術。
Js代碼
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}
狀態改變時監聽
Js代碼
function setup_for_width(mql) {
if (mql.matches) {
// The screen width is 400px or wider. Set up or change things
// appropriately.
} else {
// The screen width is less than 400px. Set up or change things
// appropriately.
}
}
var width_mql = window.matchMedia("(min-width: 400px)");
// Add a listener for when the result changes
width_mql.addListener(setup_for_width);
// And share the same code to set things up with our current state.
setup_for_width(width_mql);
⑵ 如何解決PC端和移動端自適應問題
1、最小尺寸解析度1024*768（傳統17寸顯示器），則可以採用940px、960px、或者常用的980px作為最小寬度
2、1024*768之後稍大的解析度就是1280*768了，則可以採用1200px或者1220px作為稍大的網頁寬度
3、支持css3、html5的高級瀏覽器可以利用CSS3 Media Queries讓網頁在不同解析度下自動調節布局標簽
4、不支持css3、html5的腦殘瀏覽器特別是<=ie8系列則需要用js以及resize事件來控制html的布局標簽寬度了
5、寬度自適應需要對每個顯示模塊進行不同寬度的計算，在做html布局時需要大量的計算與適配。
6、寬度自適應為不同寬度顯示器寫布局元素時常用的css
⑶ HTML網頁如何完美的適配到移動設備上
1、在已安裝的電腦桌面新建一個Word文檔（演示文稿以Office2007系列為主），然後打開新建的文檔，輸入文字。
⑷ 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站標題。
至於到底哪種方法更好，更傾向於第一種，畢竟網路移動搜索占據著網站的大部分流量，而且用戶體驗度也最好。
⑸ 如何讓一個網站同時適配PC和移動設備
要讓一個網站同時適配pc和移動端，那你得會寫前端，html,css，js用得好就行，一個個屏幕調好，如果不會的話，前端裡面有學的，花時間學就可以了
⑹ 如何讓移動網站與PC同步
電腦站和移動站共同調用和顯示同一資料庫的數據(商品信息、新聞信息、服務信息)。
手機站和電腦站分別做不同的模板，在模板中調用的資料庫資源是相同的，所以手機和電腦站的數據就同步了。
另外，也可以將模板做成響應式的，這樣就自動根據不同屏幕大小自動切換載入對應的樣式來實現網站頁面適應不同的客戶訪問端。
⑺ 怎樣做一個網頁同時適應pc端和手機端
建議你用自帶適應的模板，你可以選擇CMS 或DEDE的模板，可以自適應。也就是說PC端的做好了後，移動端的自動就好了。
⑻ 網頁怎樣做到pc端與移動端同步
第一：商品交易同步.
第二：會員信息同步.
第三：網頁內容同步.
這些同步建立的技術是網站的建設使用的是同一個後台管理，並且在網站頁面上做自適應處理！例如現在的html5代碼就可以實現這些功能！
另外，所謂的同步只是一個謊言而已！只是在一個網站做兩個不同的頁面或者一個可以適應任何屏幕大小的網站前端模板而已！
打字不易 望採納！
與如何讓網站適配電腦和移動端相關的資料
- 同志網站在哪裡
- 網站有些什麼類型的
- 如何只搜索單一網站內容
- 網站怎麼切換倍速
- 律師事務所網站應該如何製作
- 網上購物網站怎麼查
- 如何讓瀏覽器打開一個網站
- 中考成績網站進不去怎麼辦
- 江蘇平台網站搭建怎麼聯系
- 哪個網站看出生五行准
- 如何取消寵物網站
- 魏都區網站優化效果如何
- 怎麼舉報網站亂推送
- 公司打不開一個網站怎麼辦
- 國外有哪些壁紙好看的網站
- 網站建設後如何增加網路流量
- 3xhh換成什麼網站
- 國付寶網站是什麼
- 柳州找房子用什麼網站
- 動漫圖哪些網站的沒有水印
- 哪些電視可以登錄網站
- 什麼網站有收費的
- 微信團隊登錄了網站如何退掉
- 平陽網站圖片設計要注意什麼
- 資本基金網站建設需要多少錢
- qq如何製作告白網站
- 網站知道賬號如何破解密碼
- 哪裡有BD電影藍光下載網站
- 網站公安備案有什麼要注意
- 歌曲原創網站哪裡找
- 閱文為什麼沒有其他網站流量
- 網站製作如何把控項目製作時間
- 網站如何分配ip
- 聯想筆記本怎麼更改網站許可權
- 柳林織夢怎麼建移動網站
- 如何訪問專線網站
- 空孕催乳劑官方網站怎麼買
- 長治網站設計怎麼樣
- 澳門新葡3280網站是多少
- 如何在百度對話框里顯示常用網站
- 網站建設一個團隊多少人
- 如何對一個網站進行創新創意