瀏覽器現狀

pc端瀏覽器? 360瀏覽器,谷歌瀏覽器,qq瀏覽器百度瀏覽器,搜狗瀏覽器.IE瀏覽器

移動端常見瀏覽器? uc瀏覽器 qq瀏覽器 歐朋瀏覽器 百度手機瀏覽器,360安全瀏覽器...

國內的UC和QQ,百度等手機瀏覽器,根據Webkit修改過來的內核,國內尚無自主研發的內核,就像國內的手機操作系統;都是基于Android修改開發的一樣

總結:兼容移動端主流瀏覽器,處理Webkit內核瀏覽器即可

手機屏幕現狀

• 移動端的屏幕尺寸非常多,碎片化嚴重
• Android設備多種分辨率400*800 480*854 540*960 720*1280 1080*1920 等還有傳說中 4k屏
• 近年來iphone的碎片也加劇了,其設配分辨率有640*960 640*1136 750*1134 1242*2280
• 作為開發者無需關注這些分辨率 ,因為我們常用的尺寸單位是px

常見的移動端屏幕尺寸

?移動端調試方法

• chrone devtools(谷歌瀏覽器)的模擬手機調試
• 搭建本地的web服務器,手機和服務器一個局域網內,通過手機訪問服務器
• 使用外網服務器,直接ip或域名訪問

視口?

視口(viewport) 就是瀏覽器顯示頁面內容的屏幕區域,視口分為 布局視口 視覺視口和理想視口

• 視口就是瀏覽器顯示頁面內容的屏幕區域
• 視口分為 :布局視口,視覺視口,和理想視口
• 我們移動端最想要的布局是理想視口,就是手機屏幕有多寬,我們的布局視口就有多寬
• 想要理想視口,我們需要給我們的移動端頁面加meat視口標簽

布局視口:layout viewport

一般設備的瀏覽器設置了一個布局視口,用于解決早期pc端頁面在手機上顯示的問題

ios??Android 基本都將這個視口設置為980px所以pc上的網頁大多都在手機上呈現,只不過元素看上去很小,一般可以通過手機縮放頁面

視覺視口 visual viewport

字面意思, 他是用戶正在看到的網站區域,注意是網站的區域

我們通過縮放去操作視覺視口,但不會影響布局視口,布局視口仍保持原來的寬度

理想視口 ideal viewport

• 為了使網站有理想的瀏覽,和閱讀寬度而設定
• 理想視口,對設備來講,是最理想的視口尺寸
• 需要手動條件meat視口標簽通知瀏覽器操作
• meat視口標簽的主要目的:布局視口的寬度與理想視口的寬度一致,簡單理解就是設備有都寬,我們布局視口就多寬

meat 視口標簽

當我們不加視口的時候，模擬移動端，body的寬度默認是980px,并不是手機屏幕的寬度，如果想要把咱們的頁面在手機屏幕中顯示完全，就會進行縮放，這樣的話，里面的文字等就會看不清楚，為了避免這種情況，通常咱們會加視口，讓頁面的寬度等于手機屏幕的寬度。

在寫移動端的時候一定要加上下面的代碼，快捷鍵：meta:vp + tab

<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

?

?物理像素&物理像素比

• 物理像素點屏幕顯示的最小顆粒是物理真實存在的,這是廠商出廠時設置好了,比如蘋果6/7/8是750*1334(分辨率)
• 我們開發的時候1px不一定等于1個物理像素的
• pc端頁面1px等于1個物理像素的,但是移動端就不盡相同
• 1個px的顯示的物理像素點的個數,稱為物理像素比和屏幕像素比
• 物理像素 就是我們說的分辨率 iphone8的物理像素是750? 在iPhone8里面 1px開發像素=2個物理像素

?pc端和早期的手機屏幕/普通手機屏幕 :1css像素等于一個物理像素的

retina(視網膜屏幕)是一種顯示技術,可以把更多的像素點壓縮至一塊屏幕里,從而達到更高的分辨率,并提高顯示的細膩程度

移動端主流方案

第一種：pc端和移動端共用一個域名的 通過判斷屏幕寬度來改變樣式,從而適應不同的終端， 比如

• 華為：https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent
• 蘋果：Apple (中國大陸) - 官方網站

第二種：pc端和移動端用兩個域名的，pc端和移動分別做了兩套，比如：小米、京東、淘寶，一般域名中帶有m的都是移動端。?

• 京東pc：https://www.jd.com/?
• 京東移動：?https://m.jd.com/
• 小米pc：https//www.mi.com/
• 小米移動：小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米電視官方網站

移動端技術選型

單獨制作頁面:

1.流式布局

• 流式布局就是百分比布局,也稱為固定像素布局
• 通過盒子設置百分比來根據屏幕寬度,不受固定像素的限制,內容兩側填充
• 流式布局是移動端常見的布局方式
• 一般最小寬度為min-width320 px 最大寬度為640px?

2.flex彈性布局

3.less+rem+媒體查詢

讓一些等比自適應的元素,達到當設備尺寸發送改變的時候,等比例適配當前設備

使用媒體查詢根據不同的設備按比例設置HTML字體的大小然后頁面元素用rem做尺寸單位當html字體發生變化時元素尺寸也發生變化,從而達到等比例縮放的適配

動態設置html標簽font-size大小

• 假設設計稿是750px
• 假設我們把整個屏幕劃分為15等份(劃分標準不一樣也可以是20份也可以是10等份)
• 每一份作為html的字體大小這里就是50px
• 那么在320的設計稿的時候字體大小為320/15就是21.33px
• 當我們頁面元素大小除以不同的html字體大小會發現我們的比例還是相同的
• 比如我們以750為標準設計稿
• 一個100*100像素的頁面元素在750的屏幕下就是100/50轉換成rem是2rem*2rem比例是1:1
• 320的屏幕下HTML的字體大小為21.33 則2rem=42.66此時寬和高都是42.66但是寬和高的比例還是1:1但是已經實現了不同屏幕下 頁面元素盒子等比例縮放的效果

元素大小的取值方法

• 最后公式:頁面元素的rem值=頁面元素px /(屏幕寬度/劃分份數)
• 屏幕寬度/劃分份數就是HTML的font-size值
• 或者頁面元素px/html的fontsize的字體大小

less基礎

css是一門非程序式語言,沒有變量 函數 作用域等概念

• css需要書寫大量沒有邏輯的代碼,css冗余是比較高的
• 不方便維護及擴展,不利于復用
• css沒有很好的計算能力
• 非前端開發工程師來講,往往會因為缺少css編寫經驗而很難編寫出組織良好且易于維護的css代碼

less(less style sheets的縮寫)是一門css擴展語言 也稱為css預處理器

• 作為css的一種形式的擴展,他并沒有減少css的功能 ,而是在現有的css語法上,為css加入程序是語言的特性
• 他在css的語言基礎上 引入了變量 ,MiXin(混入)運算及函數等功能 大大簡化了css的編寫,并且降低了css的維護成本,他就像他的名稱所說的那樣less可以讓更少的代碼做更多的事情
• less中文網址??Less 快速入門 | Less.js 中文文檔 - Less 中文網
• 常見的css預處理器 sass less stylus

less使用

我們首先創建一個后綴名為less的文件 在這個less文件里書寫less語句

less變量

變量是指沒有固定的值 可以改變的 因為我們css中的一些顏色和數值等經常使用@變量名:值

變量名命名規范

• 必須有@為前綴
• 不能包含特殊字符
• 不能以數字開頭
• 大小寫敏感

?less編譯

本質上less包含一套 自定義的語法及一個解析器,用戶根據這些語法定義了自己的樣式規則,這些規則最終會通過解析器編譯生成對應的css文件 所以我們需要把我們的less文件編譯生成css文件這樣我們的html頁面才可以使用? Easy LESS插件用來把less文件編譯成css

less嵌套

1.less嵌套 子元素的樣式 可以直接寫到父元素里面

2.如果遇見交集,偽類,偽元素選項器

• 內層選擇器的前面沒有&符號,則它被解析為父元素選擇器的后代
• 如果有&符號它就被解析為父元素自身或父元素的偽類

less運算

任何 數字顏色變量都可以參與運算 less提供了算術運算

注意

• (*)號和(/)除號的寫法
• 運算符中間有個空格隔開 ,1px + 5
• 對于兩個不同單位的值之間的運算,運算結果讀取第一個值的單位
• 如果兩個值之間只有一個值有單位,則運算結果就是該單位

4.vw和vh

vw和vh是什么

vw/vh是一個相對單位(類似em和rem相對單位)

• vw viewport width 視口寬度單位'
• 'vh?viewport height 視口高度單位?

相對視口的尺寸計算結果

• 1vw=1/100的視口寬度
• 1vh=1/100的視口高度

例如:屏幕視口是375px那么1vw就是3.75像素,如果當前窗口為414則1vw就是4.14像素

和百分比有區別的 百分比是相對于父元素來說的,而vw vh總是針對于當前視口來說的

vw vh怎么使用

• 超級簡單,元素單位直接使用可以單位vw/vh即可?
• 因為vw vh是想對單位,所以不同的屏幕視口下 寬高一起變化完成適配
• 我們本質是根據視口的寬度來等比例縮放頁面元素的說以開發中vw基本就夠用了 vh很少使用

如何還原設計稿

前提 我們按照 iphone 678 來設計 有個盒子是50像素*50像素的 如何使用vw呢

分析

• 設計稿按照iphone678 所以視口尺寸為375px
• 那么1vw是多少像素? 375/100=3.75px
• 那我們的目標元素是多少像素 50px*50px
• 那么 50*50是多少個vw 50/3.75=13.333vw

5.混合布局

響應式頁面兼容移動端

響應式布局開發原理?就是根據媒體查詢 針對不同的寬度進行布局和樣式設置從而適配不同的設備

響應式布局容器

• 響應式布局需要一個父級作為布局容器,來實現子元素的變化效果
• 原理就是在不同的屏幕下通過媒體查詢來改變布局容器的大小,在改變子元素的排列方式和大小,從而實現不同屏幕下,看到不同的頁面布局和樣式變化

媒體查詢?

• 媒體查詢(Media Query)是c333的新語法
• 使用@media 可以針對不同的媒體類型定義不同的樣式
• @media可以針對不同的屏幕尺寸設置不同的樣式
• 當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面
• 目前針對很多蘋果手機 ,Android手機,平板等設備,都用的到媒體查詢

語法規范

@media not|only mediatype and (expressions) { CSS 代碼...; }

• ?用@media開頭注意@符號
• mediatype媒體類型
• 關鍵字 and not only
• media feature 媒體特性必須有小括號包含

mediatype媒體類型 將不同的設備劃分不同的類型,稱為媒體類型

?關鍵字 關鍵字將媒體類型或多個媒體特性鏈接到一起作為媒體查詢的條件

• and 可以將多個媒體特性鏈接到一起,相當于且的意思
• not 排除某個媒體類型,相當于非的意思,可以 省略
• only 指定某個特定的媒體 可以省略

媒體特性?每種媒體類型都具備各自不同的特性,根據不同的媒體特性設置不同的展示風格

要求小于768px的時候顯示一個顏色 ,大于768到1200 ,顯示一個顏色大于1200的時候顯示一個顏色

<style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background: green;}@media screen and (max-width:768px) {.box {background: pink;}}@media screen and (min-width:769px) and (max-width:1200px) {.box {background: gold;}}@media screen and (min-width:1201px) {.box {background: darkseagreen;}}</style>

bootstrap

bootstrap簡介

Bootstrap 來自Twitter(推特)Bootstrap是基于HTML css和 javascript的 他簡潔靈活 使web開發簡單

框架 顧名思義是一套架構 他有一套比較完整地網頁功能解決方案,而且控制權在框架本身,有預制的樣式庫,組件和插件 使用者按照框架所規定的某種規規范進行開發

bootstrap的使用

• 1.創建文件夾結構
• 2.創建html骨架結構
• 3.引入相關的樣式文件
• 4..書寫內容??直接拿Bootstrap預先定義好的樣式來使用 ,修改原有樣式注意權重問題

布局容器

Bootstrap需要為頁面內容和柵格系統包裹一個.container的容器,Bootstrap預先定義好了這個類叫container它提供了兩個做此用處的類

container類

• 響應式布局容器 固定寬度
• 大屏(>=1200px)寬度固定為1170px
• 中屏(>=992px)寬度固定位970px
• 小屏 (>=768px)寬度固定位750px
• 超小屏100%

container-fluid類

• 流式布局 百分比寬度
• 占據全部視口的容器
• 適用于單獨移動端開發

Bootstrap柵格系統

• 柵格系統 英文為"grid system"也有人稱為網絡系統 他是通過頁面布局劃分為等寬的列,然后通過列數定義模塊化布局
• Bootstrap提供了一套響應式,移動設備優先的流式柵格系統隨著屏幕或視口的尺寸增加系統最多分為12列
• Bootstrap里面container寬度是固定的,但是不同屏幕下 container的寬度不同我們把container劃分為12等份

柵格系統選項參數

柵格系統用于一系類的行(row)與列(column)的組合來創建頁面布局,你的內容可以放入這些創建好的布局中

• ?行(row)必須要放在container布局容器里面
• 我們實現列的平均劃分,需要給列添加類前綴
• xs-extra small 超小? ? sm-small 小? ?md-medlium 中等? ? lg-large 大
• 列(column)大于12多余的列(column)所在元素被稱為一個整體另起一行排類
• 每一列默認有左右15像素的padding
• 可以同時為一列指定多個設備的類名,以便劃分不同的份數 例如: class='col md-4 col sm-6"

列嵌套

柵格系統內置柵格系統將內容在次嵌套 ,簡單理解就是一個列內再分若干小列我們可以通過添加一個新的.row元素和一系類. col-sm-*元素已經存在的 col-sm-*元素內

我們列嵌套最好加一個行row這樣可以取消父元素的padding值,而且高度自動和父級一樣高

列偏移

使用col-md-offset-*類可以將列向右側偏移, 這些類實際是通過*選擇器為當前元素增加了左側的邊距margin

列排序

通過.col-md-push-*和col-md-pull-*類就可以很容易的改變列的排序

響應式工具

為了加快對移動端設備友好的頁面開發,利用媒體查詢功能,并使用這些工具類可以方便針對不同的設備展示或者隱藏頁面

?與之相反的是visible-xs?visible-sm?visible-md?visible-lg顯示某個頁面內容

rem基礎

rem (root em) 是一個相對單位,類似于em是父元素字體大小,不同的是,rem的基準是相對于html元素字體大小

rem的優點:可以通過修改html里面的文字大小來改變頁面元素中的大小可以整體控制

• rem 是指根元素（root element）的字體大小。根元素就是我們所說的html元素，默認的情況下，根元素字體的字體大小是16px;
• 那我們做移動端的響應式開發，如果純粹用之前所說的媒體查詢，那么我們的代碼就會很多，寫起來也不是很方便。那么怎么辦呢？ 我們就可以結合我們的rem。
• rem做移動端的思想？ 當我們拿到設計稿的時候，如果可以按照設計稿的尺寸去寫，然后通過更改一個值，就能更改頁面中所寫的css，那是不是會很方便，rem剛好就是。 1rem=html的字體大小（默認情況下是16px）；
• 如果我們隨著移動端屏幕的改變，然后改變下html的字體大小，就可以達到剛才的目的。
• 屏幕的寬度/設計稿的尺寸=x/100; 根據這個計算公式我們是不是可以算出移動端屏幕改變時候的根元素應該具有的字體大小。

rem+js

• 用過js動態獲取屏幕寬度修改html根字體大小
• 假設:設計稿為750px? 根字體大小為100,那么1rem=100px ,盒子寬為16px那么就是0.16rem
• 在375屏幕下 html.fontsize值為 375/750*100=50,根字體大小為50px 那么1rem=50px,那么寬度為0.16rem的盒子在?375的屏幕下為8px

window.onload = function () {/*720代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這里寫100是為了以后好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/getRem(720, 100) }; window.onresize = function () {getRem(720, 100) }; function getRem(pwidth, prem) {//html元素var html = document.getElementsByTagName("html")[0];//當前屏幕寬度var oWidth = document.body.clientWidth || document.documentElement.clientWidth;//根字體大小=當前屏幕寬度/設計稿寬度*換算比例 html.style.fontSize = oWidth / pwidth * prem + "px";// 1rem x 750 375 1rem 0.16rem// 100px 16px 100 x 50px x}

Hybrid混合app開發

也就是把前端編寫的內容嵌入到原生App中,主要以js+Native兩者相互調用為主,Hybrid app兼具了

Native App良好的用體驗,也兼具了Web app 使用html5跨平臺開發低成本的優勢 目前已經有眾多?Hybrid app開發成功應用

優勢:可以隨時上線發布,避免了app審核,同時還能達到原生app的運行流暢度

缺點: 開發成本較高,需要客戶端和前端的共同開發聯調和差bug麻煩

混合開發的兩大類

主界面是前端開發,app開發人員只需要提供一個殼子及某些api

主要是app人員開發,前端只做幾個經常更新的h5頁面

前端頁面與app的通訊 JSBridge

彈框攔截;alert comfirm prompt

原生應用可以攔截到這些操作,并且決定是否執行彈出

url攔截

我們前端請求一些地址,app都可以獲取到

這里會涉及到schema協議前端頁面與app的通訊協議

?移動端的兼容問題

css3新特性語法:需要寫兩套(-webit-和不加前綴)--.postcss會結合broeserlist自動處理

一像素邊框問題

1.設計稿是750的但是給出的邊框是1px這樣在375的設備上是0.5px但是瀏覽器不支持,只能識別到1px:

• 750設計稿(1rem=100px)盒子尺寸200*200其中四個邊框為1px.
• 375的設備上1rem=50px width-->100px??height-->100px border:1(0.5)px
• 整體放大原來的一倍,然后transform scale(0.5)縮放

2.移動端慎用 position fixed

3.手機屏幕滾動過程中,手指的一些操作 會造成默認的滾動行為卡頓 -->vue事件的 passtive修飾符(絕對不會阻止默認行為) 原理:addEventLisenter(type ,function,{passive:true},false)

4.移動端click存在300ms延遲(vue的click事件就存在這個問題)

click在移動端是單擊事件,而不像pc端的點擊事件 每一次單擊都要等300ms看是否觸發第二次點擊,沒有觸發才被認為是單擊,才會觸發click

解決方案:移動端不應該用click 而是基于 touchstart/touchmove/touchend模擬出點擊事件

fastclick幫助我們處理了:以后事件還是@click事件,插件會幫我們處理為 touch 事件

$npm install fastclick

import?fastclick from "fastclick"

fastclick attach(document.body)

總結

以上是生活随笔為你收集整理的移动web开发rem+js适配布局开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。