web移動端pc端自適應

1. 網站的PC和WAP以及自適應網站這三者有什麼區別呢

1、含義不同：PC網站是指電腦（台式電腦和筆記本電腦）訪問的網站，WAP網站是無線通訊協議的英文簡稱，手機WAP網站，自適應網站是使用不同設備瀏覽時呈現不同的網頁，網頁內容及版式風格或相似或完全不同。

2、開發基本不同：PC網站是按電腦硬體終端展示進行程序開發的。網站內容相對更加的詳細。手機WAP網站是支持手機瀏覽器訪問的網站，是根據手機展示設計開發的。

自適應網站目的在於為了符合訪客的瀏覽。針對一些優化人員，更習慣於做到資料庫同步，使PC端的網址和內容與移動端的網址和內容一一對應。

3、訪問方式不同：在二維碼這一功能沒有出現的時候，WAP網站和PC網站的訪問方式遵循的都是搜索引擎定律，主要方式也是通過輸入網址和搜索關鍵詞進行訪問。

由於WAP網站的便捷性，而且為了迎合用戶少操作的原則，WAP網站除了通過輸入網址和搜索關鍵詞進行訪問。由於WAP網站的便捷性，而且為了迎合用戶少操作的原則，WAP網站除了通過輸入網址和搜索關鍵詞進行訪問之外，又多了一個使用微信二維碼直接訪問的功能。

(1)web移動端pc端自適應擴展閱讀：

wap網路營銷應用還主要集中在互聯網企業上面，是各類網站開拓新功能、新陣地，尋找新業務的重要領域。

但對於傳統企業而言，對於wap網站的認識還很有限，wap網站的普及和推廣尚需時日。然而wap網站的廣大用戶市場是客觀存在的事實。有市場就必須佔領，如何做好傳統企業在wap領域的營銷活動，還是一個很新的課題。

與傳統互聯網一樣，企業要開展wap網路營銷，也需要建設自己的wap網站。雖然在表現形式上，wap網站要弱於一般的網站，對於圖片、動畫等表現力度不夠，但麻雀雖小，五臟俱全。

2. pc端和移動端屏幕自適應

         做網頁時，我們通常需要考慮到不同電腦屏幕尺寸，以及不同手機屏幕大小等問題，解決樣式發生改變的情況，那麼如何解決呢？現在主要是採用自適應來解決高度，寬度的，以及圖片自適應問題，下面就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。

3. 在移動端 web怎麼做到自適應布局

css3用box-flex;在w3school里找找，主要是根據父元素按比例分配高度父元素{width:100%;display:box;}比如三欄布局A、B、C要想設成一樣的寬度就用A{box-flex:1;}B{box-flex:1;}C{box-flex:1;}要是兩欄布局B是A的2倍那就是A{box-flex:1;}B{box-flex:2;}高度也是還有一個css3的新功能就是calc()計算，可以計算高度，可以試著用一下PS，我只是說說，移動端響應式局的話，布局要隨著窗口變的，就像你這個，要是在普通的手機端就得變成一欄布局，不能保持三欄用MediaQuery設置不同的窗口寬度給不同的css樣式都是css代碼不用js控制

4. Web前端pc和移動端的區別

pc，我們需要考慮五大瀏覽器，ie6-11，firefox，chrome，safari都得兼容的吧。css還是js，以及各種框架。
mobile的網頁開發，我們需要考慮什麼呢？
就目前來說，我們只需要考慮webkit內核的瀏覽器和chrome，uc，qq，小米手機瀏覽器就好了
1、PC端在開發過程中考慮的是瀏覽器兼容性，移動端開發中考慮的是手機兼容性問題，做移動端開發，更多考慮的是手機解析度的自適應和不同手機操作系統的略微差異化；

2、在部分事件的處理上，移動端自然是偏向於觸屏的，另外包括移動端彈出的手機鍵盤該如何處理，這樣的問題在PC上肯定不會遇到，但在移動端，如果你沒有經驗，處理起來是相當麻煩的；
3、布局上，移動端開發是要做到頁面布局自適應的，而PC端頁面布局的比例會相對固定；
4、在動畫效果處理上，PC端要考慮IE的兼容性，通常用JS做動畫的通用性會好一些，但相比CSS3卻犧牲了較大的性能，而在手機端，如果要做一些動畫、特效等，第一選擇肯定是CSS3，既簡單，效率又高。
在實際中肯定還有其他一些不常見的問題

5. 網站PC端和移動端無法自適應，求教大神，用的織夢後台

你寫的樣式沒有被應用，你的網站要想兼容PC和移動，上傳圖片的時候一定要注意圖片的高度和寬度，織夢上傳圖片會填寫高度和寬度，這個是寫到html中的，這里樣式優先順序高於你的CSS，上傳圖片的時候要去掉高度和寬度不填，CSS才能控制圖片

6. 移動端Web頁面適配方案（整理版）

@(概述)[基本概念|百分比|rem|vw/vh|響應式設計]

移動端web頁面的開發，由於手機 屏幕尺寸 、 解析度 不同，或者需要考慮 橫豎屏 問題，為了使得web頁面在不同移動設備上具有相適應的展示效果，需要在開發過程中使用合理的適配方案來解決這個問題。

早期網頁設計採用 靜態布局 ，通過 <meta> 標簽中的 applicable-device 應用設備標識識別移動設備，即 <meta name = 'applicable-device' content = 'mobile'> ，在 <meta> 標簽中的 viewport 標簽中設置 width ，通過 js 動態修改標簽的 initial-scale 使得頁面等比縮放，剛好占滿整個屏幕。一些文章中有提到靜態布局中頁面各個元素採用 px 為單位，這種方案實現簡單，不存在兼容性問題，但用戶體驗很不友好。

後面出現 流式布局 ，使用百分比 % 定義寬度，高度使用 px 固定，根據可視區域大小實時進行尺寸調整，通常使用 max-width/min-width 控制尺寸范圍過大或者過小。這種方案實現比較簡單，但在大屏手機或橫豎屏切換場景下可能會導致頁面元素被拉伸變形，字體大小無法隨屏幕大小發生變化。

順應不同頁面字體大小展現問題，出現了 彈性布局 。這種布局方案下，包裹文字的元素的尺寸採用 em/rem 為單位，頁面主要劃分區域的尺寸依據情況使用 px 、百分數或者 em/rem 。如一些高校的網站 jlu ，頁面的主要劃分區域使用 px 和百分比，包裹文字的元素和文字採用 em 。

上面的這幾種方案下，頁面元素的大小按照屏幕解析度進行適配調整，但是整體布局不變，對於 響應式web設計 ，網頁布局會隨著訪問它的視口及設備的不同呈現不同的樣式，在實現上可能會以上多種方案的結合，同時搭配 媒體查詢 技術使用，使得一個頁面在多個終端 (PC, mobile, pad) 呈現滿意效果，如 mashable 。

[TOC]

像素，是屏幕上顯示數據的最基本的點，表示相對大小。不同解析度下相同長度的 px 元素顯示會不一樣，是因為像素點的個數相同情況下，不同解析度下每個像素點對應的像素寬度不同。比如同樣是 14px 大小的字，在 1366×768 顯示屏下會顯示的小，在 1024×768 顯示屏下會相對大。也稱為 物理像素（設備像素 ），是解析度的尺寸單位。

印刷行業常用單位，能夠使用測量設備測得的長度，等於 1/72 英寸。

在不同屏幕上， css 像素呈現的物理尺寸一致，但 css 像素對應的物理像素具數不同。標準的顯示密度下， 1 個 css 像素對應一個物理像素，縮放時， 1 個 css 像素對應的物理像素會減增。是一種 設備獨立像素(device independent pixels: DIPs)

像素密度，每英寸所擁有的像素數。值越高，顯示畫面細節越豐富。計算公式為： ，其中 和 是解析度的寬高， 是屏幕尺寸。

列印設備每英寸印刷出來的點有多少個，值越高，圖片越細膩。

設備物理像素和設備獨立像素比 ，即 是指在理想布局寬度，使用多少個物理像素來渲染一個css像素。js中通過 window.devicePixelRatio 獲取，css中通過 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 進行媒體查詢。

<meta> 標簽中定義了一些元數據信息，通過設置 <meta name = "viewport"> ，提供有關 視口初始大小 的信息，供 移動設備 使用。屬性值為

移動端涉及 布局視口 （Layout Viewport）、 視覺視口 （Visual ViewPort）和 理想視口 （Ideal ViewPort）。

與移動端web頁面適配有關的手機屏幕特性包括

硬體所支持的，屏幕每行的像素 * 每列的像素點數，單位是 px 。

設備獨立的，軟體可以達到的，個人理解是使得軟體/頁面在不同屏幕上顯示出來的效果一致。

像素解析度 ÷ 邏輯解析度等於 倍率 ，如 @3x 表示解析度的 3 倍。一個已知物理像素大小的元素，如果在普通屏中其設備像素等於 css 像素，但在一些高清屏中，如 Retina 顯示屏，一個css像素對應 2 或 3 個設備像素，這時顯示出來的元素會變小。為了讓元素如期待顯示，需要傳入 原始設計稿尺寸 × 倍率 的設計稿，根據 DPR 的定義，這樣載入後能夠達到同樣的效果。

手機屏幕對角線長度換算成英寸的大小

貼上 源碼 分析

視口 是瀏覽器中用於呈現網頁的區域，移動端的視口通常指的是 布局視口

使用 css 預處理器把設計稿尺寸轉換為 vw 單位，包括 文本 ， 布局高寬 ， 間距 等，使得這些元素能夠隨視口大小自適應調整。以 1080px 設計稿為基準，轉化的計算表示為

響應式設計 使得一個網站同時適配 多種設備 和 多個屏幕 ，讓網站的布局和功能隨用戶的使用環境（屏幕大小、輸出方式、設備/瀏覽器能力而變化），使其視覺合理，交互方式符合習慣。如使得內容區塊可伸縮與自由排布，邊距適應頁面尺寸，圖片適應比例變化，能夠自動隱藏/部分顯示內容，能自動折疊導航和菜單。

7. 如何使網頁同時兼容PC端和移動端

PC和移動因為屏幕像素大小不一樣，造成網頁在pc和移動端顯示有差距。如果要讓網頁在pc和移動端都有好的用戶體驗，你需要1、自適應網頁：通過對不同解析度設置不同的樣式效果，可以讓網頁兼容pc和移動端，此方式不適合大型的平台。一般的企業站和個人站可以使用這樣的方式。2、分別建立pc端和移動端。兩個網站分別對應pc和移動端。

8. 寫web端跟寫自適應的pc端手機端有什麼不一樣呢。

手機的屏幕比較小。
當頁面在手機上顯示的時候，布局可能會和PC 的效果不同。
比如說：
兩欄自適應布局中。pc端可能是兩欄，但在小屏手機中，可能就是一欄了。