正文

移動(dòng)端適配優(yōu)化（移動(dòng)端適配方案）

發(fā)布時(shí)間：2023-04-13 23:03:56 稿源：創(chuàng)意嶺閱讀： 82

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于移動(dòng)端適配優(yōu)化的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

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

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

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

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

本文目錄:

1、移動(dòng)端的適配問題
2、移動(dòng)端適配概念移動(dòng)端適配方案(rem+@media) 視口
3、移動(dòng)端，PC端是怎么做適配的？
4、移動(dòng)端seo適配怎么做

移動(dòng)端適配優(yōu)化（移動(dòng)端適配方案）

一、移動(dòng)端的適配問題

什么是px

像素，相對(duì)于顯示器屏幕的分辨率。

特點(diǎn)：固定大小，設(shè)置以后就不能因?yàn)轫撁娓淖兌淖儭?/p>

什么是pt

物理長(zhǎng)度單位 1pt = 1px +1px*1/3

什么是em

相對(duì)長(zhǎng)度單位，相對(duì)當(dāng)前對(duì)象內(nèi)文本的字體尺寸。

特點(diǎn)：em的值并不是固定的，em會(huì)繼承父級(jí)元素的字體大小。

注意：瀏覽器默認(rèn)字體大小16px。谷歌最小12px。

什么是rem

CSS3新增的一個(gè)相對(duì)單位（root em）相對(duì)于根節(jié)點(diǎn)html的字體大小來計(jì)算的。默認(rèn) 1rem = 16px

特點(diǎn)：值只受到根節(jié)點(diǎn)html的字體大小影響，并不受父元素字體大小的影響。

rem適配

寫在js的內(nèi)容

(function(document,window){

let doc = document.documentElement,//獲取根節(jié)點(diǎn)html

resizeEvent = "orientationchange" in window ? "orientationchange" :"resize",

resets = () =>{

if(doc.clientWidth>750){

doc.style.fontSize = "100px";

document.getElementById("root").style.width = '750px';

return

}

let fontSizeValue = doc.clientWidth/7.5;

doc.style.fontSize = fontSizeValue+"px";

document.getElementById("root").style.width = "auto";

}

if(!doc.addEventListener) return ;

window.addEventListener(resizeEvent,resets,false)

doc.addEventListener("DOMContentLoaded",resets,false)

})(document,window)

--------------------------------------------我是一條分割線--------------------------------------------

App

原生開發(fā) ios

安卓

前端開發(fā)app dclould apicloud ---開發(fā)完移動(dòng)端頁面之后，進(jìn)行打包apk文件

前端開發(fā)的原生app應(yīng)用 ------ react-native flutter weex ----跨終端應(yīng)用開發(fā)

混合開發(fā) hybird 套殼開發(fā) ------對(duì)于前端沒什么太大工作主要還是寫移動(dòng)端頁面

h5頁面-------webapp -----移動(dòng)端網(wǎng)站

小程序開發(fā)

微信公眾號(hào)開發(fā)

平臺(tái)---

業(yè)務(wù)平臺(tái)

后臺(tái)管理

pc端的面向客戶的網(wǎng)站

企業(yè)站

orientationchange 事件

當(dāng)設(shè)備的方向變化（設(shè)備橫向持或縱向持）此事件被觸發(fā)。

//判斷在window對(duì)象中是否有orientationchange屬性

'orientationchange' in window

DOMContentLoaded 事件

當(dāng)初始的 HTML 文檔被完全加載和解析完成之后（不需要等待圖片等其他資源加載完成），DOMContentLoaded 事件被觸發(fā)。

load 事件

頁面上所有的資源（圖片，音頻，視頻等）被加載以后才會(huì)觸發(fā)load事件，簡(jiǎn)單來說，頁面的load事件會(huì)在DOMContentLoaded被觸發(fā)之后才觸發(fā)。

window.onload=function(){

}

document.onready

二、移動(dòng)端適配概念移動(dòng)端適配方案(rem+@media) 視口

1.百分比單位；

2.vw 和 vh

3.媒體查詢 + rem;

注意：不能使用px作為移動(dòng)端適配的單位。

在高清屏下，1個(gè)css像素 1px 所占用的物理像素點(diǎn)是動(dòng)態(tài)變化的，在高清屏中，同樣是100px，此時(shí)

1px只是占用的像素點(diǎn)更多了而已。因此不管切換到什么樣式的屏幕尺寸下，100px始終看起來就是

那么大，所以px不能作為適配單位。

物理像素：(設(shè)備像素)：一個(gè)設(shè)備的屏幕是由一個(gè)一個(gè)的小像素點(diǎn)組成的，設(shè)備出場(chǎng)時(shí)，屏幕有多

少個(gè)像素點(diǎn)構(gòu)成是一定的

邏輯像素：(邏輯像素 css像素)：px，它是我們前端開發(fā)使用的一個(gè)單位

手機(jī)屏幕分為1倍屏，2倍屏，3倍屏

1倍屏：1px的css像素，對(duì)應(yīng)1個(gè)物理像素點(diǎn)

2倍屏：1px的css像素，對(duì)應(yīng)2個(gè)物理像素點(diǎn)

1.假設(shè)設(shè)計(jì)稿尺寸為 375px,我們將屏幕尺寸分為若干份，比如10份，

12份，15份，20份等。然后設(shè)置html的font-size,比如375px,評(píng)分15份，一份為25px,即html(font-

size:25px)

2. 假設(shè)設(shè)計(jì)稿尺寸為：375px,將設(shè)計(jì)稿中元素的尺寸轉(zhuǎn)換為rem。雖然其他尺寸下元素的rem沒有

變化，但是html的font-size是根據(jù)媒體查詢?cè)趧?dòng)態(tài)變化的，所以最終計(jì)算出來元素的尺寸也是動(dòng)態(tài)

變化的。

px 換算 rem ：安裝插件 px to rem & rpx(cssrem)

設(shè)置基準(zhǔn)為font-size:375px/15等份

meta視口標(biāo)簽的主要作用：讓布局視口的寬度和設(shè)備寬度保持一致，形成理想視口，

簡(jiǎn)單就是設(shè)備有多寬，布局視口就有多寬

三、移動(dòng)端，PC端是怎么做適配的？

px：像素

em：一個(gè) M 的寬度（面試：一個(gè)字的寬度）

rem：root em 根元素（ <html> ）的 font-size //oppo個(gè)別機(jī)型不適用

vh：view height，視口高度 100vh === 視口高度

vw：view width，視口寬度 100vw === 視口寬度

瀏覽器默認(rèn) font-size:16px;

Chrome瀏覽器默認(rèn)最小字號(hào)為12px：font-size:12px;

所以一般情況下，rem 的font-size不要小于12px;

rem 就是 <html> 元素的 font-size，默認(rèn)為 16px;(瀏覽器默認(rèn)font-size)

rem和em 的區(qū)別：

1.meta viewport

2.媒體查詢

更具查詢結(jié)果選擇不同的css樣式,設(shè)置屏幕最大寬度，如果頁面范圍在這個(gè)寬度內(nèi)就可以顯示對(duì)應(yīng)的CSS，以最大500為例

<style>

@media (max-width: 500px) {

......

}

</style>

3.動(dòng)態(tài) rem方案

一切單位以屏幕寬度為標(biāo)準(zhǔn)，就能完美還原設(shè)計(jì)稿。

動(dòng)態(tài)REM思路：動(dòng)態(tài)rem 采用整體縮放的思想，在頁面渲染之前，使用JS獲取設(shè)備寬度并設(shè)置rem(1rem == html font-size == viewport width)，之后的布局單位全部使用rem來實(shí)現(xiàn)整體縮放。

在使用動(dòng)態(tài) rem 布局的移動(dòng)端頁面中，很小的寬度如border-width 依然使用px，因?yàn)榧词故褂胷em，當(dāng)rem小于1px 時(shí)，依然會(huì)被瀏覽器當(dāng)做1px 使用。

四、移動(dòng)端seo適配怎么做

你好，以百度為例，現(xiàn)在百度都是推熊掌號(hào)，進(jìn)入熊掌后找到搜索資源平臺(tái)，如下圖：

移動(dòng)端適配優(yōu)化（移動(dòng)端適配方案）

然后進(jìn)入找到移動(dòng)適配：

移動(dòng)端適配優(yōu)化（移動(dòng)端適配方案）

在說下怎么做：添加適配關(guān)系，有規(guī)則提交還有多規(guī)則，還有url對(duì)適配。如果你不大會(huì)寫正則表達(dá)式，可以跟技術(shù)人員對(duì)接，讓他們寫出移動(dòng)網(wǎng)站和pc網(wǎng)站鏈接的正則式，規(guī)則多久多寫幾個(gè)，如果鏈接規(guī)則比較亂，就用url對(duì)適配。

說下url對(duì)適配：

比如你是pc www.xxx.com

然后移動(dòng)是 m.xxx.com

那么你可以找出有對(duì)應(yīng)關(guān)系的移動(dòng)和pc鏈接，比如說內(nèi)容頁，那么可以通過excel表排成一一對(duì)應(yīng)關(guān)系提交

移動(dòng)端適配優(yōu)化（移動(dòng)端適配方案）