1.移動端認(rèn)知
- 分類
- 原生
- iOS，編寫語言O(shè)C/swift
- 安卓,編寫語言java
- H5 編寫的移動端是web網(wǎng)頁，簡稱
M站,使用與手機(jī)瀏覽器，其原理就是通過手機(jī)上瀏覽器通過webKit內(nèi)核去加載寫好的html5和css文件
- 原生
一般大型的公司是這些區(qū)分開的，原生人需要，H5的人也是需要，比如電商類，旅游類等
2.開發(fā)常用的單位
2.1 像素px
-
不會隨著視口大小的變化而變化, 像素是一個固定的單位(絕對單位)
image.png
2.2 百分比%
- 子元素
寬度/高度是參考父元素寬度/高度計算的
.father {
width: 300px;
height: 200px;
background-color: rebeccapurple;
margin: 100px auto;
}
.son {
/*
2.1 子元素寬度是參考父元素寬度計算的
* 2.2子元素高度是參考父元素高度計算的
*/
width: 50%;
height: 50%;
background-color: green;
}
-
子元素padding無論是水平還是垂直方向都是參考父元素寬度計算的
.father {
width: 300px;
height: 200px;
background-color: rebeccapurple;
margin: 100px auto;
}
.son{
padding-top: 50%;
padding-bottom: 50%;
padding-left: 50%;
padding-right: 50%;
background-color: green;
}
-
子元素margin無論是水平還是垂直方向都是參考父元素寬度計算的
.father {
width: 300px;
height: 200px;
background-color: rebeccapurple;
margin: 100px auto;
}
.son{
width: 100px;
height: 100px;
margin-top: 50%;
margin-left: 50%;
margin-right: 50%;
margin-bottom: 50%;
background-color: green;
}
-
不能用百分比設(shè)置元素的border
注意:
百分比是一個動態(tài)的單位, 會隨著父元素寬高的變化而變化(相對單位)，如果父元素沒有高那么設(shè)置子元素為100%也是不起作用的，只能是根據(jù)子元素的內(nèi)容撐起高度
2.3 em單位
-
em是前端開發(fā)中的一個動態(tài)單位, 是一個相對于元素字體大小的單位- 比如:
font-size: 12px; ,那么1em就等于12px
- 比如:
- 當(dāng)前元素設(shè)置了字體大小, 那么就相對于當(dāng)前元素的字體大小
- 當(dāng)前元素
沒有設(shè)置字體大小, 那么就相當(dāng)于第一個設(shè)置字體大小的祖先元素的字體大小 - 如果
當(dāng)前元素和所有祖先元素都沒有設(shè)置大小, 那么就相當(dāng)于瀏覽器默認(rèn)的字體大小
自身元素有 字體大小
.son {
font-size: 13px;
width: 10em;
height: 10em;
background-color: orange;
}
自身元素沒有設(shè)置
font-size父元素設(shè)置font-size
.father {
font-size: 15px;
}
.son {
width: 10em;
height: 10em;
background-color: orange;
}
2.4 rem單位
-
rem也是一個動態(tài)的單位, 會隨著根元素字體大小的變化而變化(相對單位) -
rem只根據(jù)html根元素的font-size有關(guān) - 如果
根元素沒有設(shè)置字體大小, 那么就相對于瀏覽器默認(rèn)的字體大小
2.5 vw(Viewport Width)和vh(Viewport Height)相對于視口的寬度和高度
-
vw和vh：是前端開發(fā)中的一個動態(tài)單位, 是一個相對于網(wǎng)頁視口的單位 - 系統(tǒng)會將
視口的寬度和高度分為100份,1vw就占用視口寬度的百分之一, 1vh就占用視口高度的百分之一 -
vw和vh和百分比不同的是, 百分比永遠(yuǎn)都是以父元素作為參考,而vw和vh永遠(yuǎn)都是以視口作為參考
3.視口 (移動端必備)
- 視口簡單理解就是
可視區(qū)域大小我們稱之為視口 - 通過
meta設(shè)置視口大小, 快捷方式meat:vp + tab 鍵
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width設(shè)置視口寬度等于設(shè)備的寬度
initial-scale=1.0初始縮放比例, 1不縮放
maximum-scale：允許用戶縮放到的最大比例
minimum-scale：允許用戶縮放到的最小比例
user-scalable：用戶是否可以手動縮放
4.移動端的適配
4.1移動端適配一(媒體查詢)
@media screen and (min-width: 320px) {
// 需要布局的 CSS 代碼
}
//適配375屏幕
@media screen and (min-width: 375px) {
// 需要布局的 CSS 代碼
}
@media screen and (min-width: 414px) {
// 需要布局的 CSS 代碼
}
調(diào)整屏幕寬度的時候
不用刷新頁面即可響應(yīng)式展示
特別適合對移動短和PC維護(hù)同一套代碼的時候
缺點: 由于移動端和PC端維護(hù)同一套代碼, 所以代碼量比較大，維護(hù)不方便
4.1移動端適配二 (rem)
在說明使用
rem適配時，需要先說明一個等比縮放問題，因為在我們開發(fā)過程中，UI設(shè)計圖片一般是750 * xxx的或者1125 * xxx的大小，所以我們需要對設(shè)計師提供的圖片進(jìn)行等比縮放, 這樣才能1:1還原設(shè)計圖片
- 如果等比例縮放 ?
如果是 750 * xxx 的圖片，我們自己定義一個
平均的分?jǐn)?shù)
比如: 750設(shè)計圖片分為10份, 那么每一份的大小就是75px
那么在目標(biāo)手機(jī)屏幕上與之對應(yīng)的分?jǐn)?shù)應(yīng)該 ：
375屏幕也分為10份, 那么每一份的大小就是37.5px，我們可以根據(jù)rem把計算出來的結(jié)果設(shè)置為html的font-size = 37.5px
計算圖片的等比例大小
原始元素尺寸 / 原始圖片每一份大小 * 目標(biāo)屏幕每一份大小 = 等比縮放后的尺寸
比如:100 * 100 的圖片 等比縮放為:100/75 * 37.5 = 46.667px;
與之對應(yīng)的rem為100/75 = 1.33rem,1rem= 37.5px
布局適配，不同的時機(jī)屏幕對應(yīng)的
rem的font-size不同
320的屏幕，分10份 對應(yīng)的事font-size = 32px
375屏幕也分為10份, 那么每一份的大小就是37.5px，
414的屏幕對應(yīng)的事font-size = 41.4px
750設(shè)計圖片分為10份, 那么每一份的大小就是75px
所以下面的布局中，只要使用到 距離計算或者寬度和高度計算時 就要換算成對應(yīng)的rem
<style type="text/less">
*{
padding: 0;
margin: 0;
}
@media screen and (max-width: 320px) {
html{
font-size: 32px;
}
}
@media screen and (min-width: 375px){
html{
font-size: 37.5px;
}
}
@media screen and(min-width:414px ){
html{
font-size: 41.4px;
}
}
.header {
position: relative;
}
.header > img {
width: 100%;
height: auto;
}
.header > p {
position: absolute;
top: 80/75rem;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 36/75rem;
}
.middle,.bottom{
height: 290/75rem;
position: relative;
}
.main {
border: 1px dashed #0d7efb;
border-radius: 5/75rem;
padding: 10/75rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.main > img:nth-of-type(1){
width: 410/75rem;
height: 270/75rem;
vertical-align: bottom;
}
.main > img:nth-of-type(2){
position: absolute;
top: 60/75rem;
left: 50%;
transform: translateX(-50%);
width: 84/75rem;
height: 84/75rem;
}
.bottom {
margin-top: 35/75rem;
}
</style>
改進(jìn)(視覺偏差 和 動態(tài)的計算rem對應(yīng)的font-size)
在真實的開發(fā)中，由于不同的屏幕對應(yīng)的
像素不太一樣，我們在設(shè)置CSS中對應(yīng)的是虛擬像素(對應(yīng)下圖的邏輯分辨率)和手機(jī)上真實的物理像素(對應(yīng)下圖的 分辨率)時，有時存在偏差，
所謂的偏差就是，CSS的虛擬像素在顯示在真實手機(jī)上時，由于真實手機(jī)的分辨率可能是CSS虛擬像素的2倍或者3倍，那么對應(yīng)出來的布局可能就是css 1px在真實手機(jī)上可能就是4px 和 9px,因為2/3倍 擴(kuò)大至x,y軸上的像素網(wǎng)格點
為了解決上述問題的
視覺偏差，那么對應(yīng)的視口就要進(jìn)行相應(yīng)的縮放
- 那么
如何獲取到對應(yīng)的縮放比例呢?
通過
window.devicePixelRatio獲取當(dāng)前的設(shè)備像素
測試：在不同的模擬器上打印出的window.devicePixelRatio是不同的，iphone對應(yīng)的就是上圖的Scale里面的 數(shù)字
因為圓視口對應(yīng)的事真實initial-scale= 1.0，所以我們通過通過<meta name="viewport">的initial-scale屬性來進(jìn)行 縮小，從而來解決視覺偏差
//獲取不同手機(jī)上 進(jìn)行縮放的比例
let scale = 1.0 / window.devicePixelRatio;
//模板字符串
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
//寫入document對象
document.write(text);
動態(tài)的計算rem對應(yīng)的font-size
因為沒有個對應(yīng)的手機(jī)的真實內(nèi)容的
可見寬度是固定的,所以在加載的時候
根據(jù)屏幕的寬度設(shè)置自己的定義的 份數(shù) 就是 對應(yīng)的font-size，比如上述自己定義的是 10份
document.documentElement.style.fontSize = window.innerWidth / 10+ "px";
所以上述代碼的 完美適配方式為
<script type="text/javascript">
// 獲取不同手機(jī)上 進(jìn)行縮放的比例
let scale = 1.0 / window.devicePixelRatio;
//設(shè)置模板字符串
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
//寫入document對象
document.write(text);
//動態(tài)設(shè)置 fontSize
document.documentElement.style.fontSize = window.innerWidth / 10 + "px";
</script>
對應(yīng)上述代碼的
CSS設(shè)置，刪除@media對應(yīng)的媒體適配
