pc移動端適配（pc 移動端適配）

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于pc移動端適配的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關鍵詞，就能返回你想要的內(nèi)容，越精準，寫出的就越詳細，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務客戶遍布全球各地，如需了解SEO相關業(yè)務請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

• 1、如何讓一個網(wǎng)站同時適配PC和移動設備

• 2、移動端Web頁面適配方案（整理版）

• 3、什么是移動適配

• 4、移動端全屏滾動頁面（fullPage）的適配問題

一、如何讓一個網(wǎng)站同時適配PC和移動設備

要讓一個網(wǎng)站同時適配pc和移動端，那你得會寫前端，html,css，js用得好就行，一個個屏幕調(diào)好，如果不會的話，前端里面有學的，花時間學就可以了

二、移動端Web頁面適配方案（整理版）

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

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

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

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

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

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

[TOC]

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

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

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

像素密度，每英寸所擁有的像素數(shù)。值越高，顯示畫面細節(jié)越豐富。計算公式為： ，其中 和 是分辨率的寬高， 是屏幕尺寸。

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

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

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

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

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

硬件所支持的，屏幕每行的像素 * 每列的像素點數(shù)，單位是 px 。

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

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

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

貼上 源碼 分析

視口 是瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域，移動端的視口通常指的是 布局視口

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

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

三、什么是移動適配

移動適配是指使不同尺寸的手機設備頁面“相對性的達到合理的展示（自適應）”或者“保持統(tǒng)一效果的等比縮放。手機設備屏幕尺寸不一，做移動端的Web頁面，需要考慮安卓/IOS的各種尺寸設備上的兼容，針對移動端設備的頁面，設計與前端實現(xiàn)更好地適配不同屏幕寬度的移動設備。

擴展資料：

完美的移動適配不需要用戶縮放和橫向滾動條就能正常的查看網(wǎng)站的所有內(nèi)容；顯示的文字、圖片等其他元素大小合適，無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差不多的。

適配不同屏幕寬度以及不同dpr，通過動態(tài)設置viewport(scale=1/dpr) + 根元素fontSize + rem, 輔助使用vw/vh等來達到適合的顯示。

若無需適配可顯示1px線條，也可以不動態(tài)設置scale，只使用動態(tài)設置根元素fontSize + rem + 理想視口。

四、移動端全屏滾動頁面（fullPage）的適配問題

之前把這種一屏一屏滾動的頁面，叫過鎖屏，叫過滑動，就是沒有找到一個標準的叫法。后來查了一些資料，也確實沒有標準的定義。只是有個插件叫fullPage，比較符合，然后中文就是全屏滾動了。也討教了另一個前端同伴，他也說就叫fullPage吧。然后就這么愉快的決定給它叫做全屏滾動了！

如今，經(jīng)常能看見這種網(wǎng)站，這些網(wǎng)站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內(nèi)容，顯得格外的高端大氣上檔次！感覺開始的時候pc較多，后來發(fā)展到移動端。簡單的說，全屏滾動就是整個頁面從上到下由多個部分組成，每個部分都正好占滿一個屏幕。用戶可以滾動鼠標滾輪（移動端為滑動），每次滾動（滑動）都會從一個部分滾動到另一個部分。因為要設置每個部分的內(nèi)容都是占滿一個屏幕的，所以一般都是添加一些簡單的內(nèi)容。移動端更是必須的，移動端的設備雜亂，屏幕大小尺寸不同，分辨率不同，那么要想在每個設備上都呈現(xiàn)完美的狀態(tài)，簡直是不可能的。

我們正在做的全屏滾動頁面呈現(xiàn)的內(nèi)容就是比較多的，是按照iphone6的尺寸做的。由于布局樣式用了rem和flexible適配，內(nèi)容會隨著屏幕而放大或者縮小。在iphone5上效果還是可以的，而iphone4就完全不行，有一部分內(nèi)容被遮掉了。經(jīng)過媒體查詢iphone4手機也可以了。而面臨著更嚴峻的問題是還有好多五花八門的尺寸。 安卓和ios常用尺寸 ，接下來選取了這個鏈接給提供的安卓和ios常用的前五種尺寸做適配。這樣除了iphone4、5、6之外還要調(diào)試十種尺寸，感覺真是路漫漫其修遠兮。然后就有了一個這樣的思考，這十種尺寸的比例是不是一樣呢，如果比例一樣，是不是可以按比例進行媒體查詢呢，如果可以就不用調(diào)試十種了。

十種尺寸里面有七種尺寸的比例都是1:1.7多的，最后找到了按比例查詢的css即顯示區(qū)域?qū)捀弑龋╝spect-ratio）此值只支持正整數(shù)，因此下面我把1:1.7各乘以10寫為10:17。也是支持min和max的。另外還有設備寬高比（device-aspect-ratio）。

全屏滾動頁面的適配問題還需要根據(jù)頁面的需求情況去做相應的適配，并沒有說寫上一行樣式，所有適配就都解決了的方法。感覺說的和廢話一樣呢？主要是想介紹按比例的媒體查詢樣式的，其他還有好多以前沒用到過的查詢方法可以參考 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

以上就是關于pc移動端適配相關問題的回答。希望能幫到你，如有更多相關問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。

推薦閱讀：

pc瀏覽器排行榜（pc瀏覽器排行榜2022）

抖店pc端工作臺（抖店pc端工作臺手機怎么登錄）

pc處理器排行榜（pc處理器排行榜）

個體戶抖音能開藍v嗎（個體戶抖音能開藍v嗎安全嗎）

鄭州短視頻運營公司哪家好點