移動web(一)移動web基礎知識點、流式佈局
1、爲什麼要去研究移動web
移動web已經從趨勢變成了一個主流了,互聯網的流量入口已經大於PC端的流量入口
2、兼容性問題
在國內的移動web瀏覽器絕大部分都是基於webkit內核的,所以一些css3和h5的新特性絕大部分都被支持,需要添加前綴,但是,不同機型之間可能會略有不同,所以需要自己踩坑。
3、移動web和PC相比的差異性在哪裏
移動web的只要核心就是做自適應的佈局,在手持設備上基本都是通欄,並且佈局的細節比PC端要少,文字內容和模塊也相對偏少
4、移動端常見的佈局–流式佈局(百分比佈局)
【1】流式佈局(百分比佈局)
流式佈局是移動web開發使用的常用佈局方式之一。
【2】流式佈局下的幾個頁面特徵:
- 寬度自適應,高度寫死,不能百分百去還原設計圖
- 一些小ICON 圖標等都是寫死的 不是所有的東西都是自適應的,一般都是模塊會呈現自適應
- 一些產品插入圖也就是img等都默認設置寬度百分百,讓其自動保持等比例縮放,一般不予寫死
字體大小等都是寫死的
【注意】常用的是rem結合流式佈局的寫法,使用rem去計算高度,百分比去計算寬度,實現寬高完全自適應。
【3】移動端經典的幾個模塊佈局
1)左側固定,右側自適應
左側盒子直接寫死寬高,並且浮動;右側盒子直接不寫寬,直接用margin-left去擠出距離,這個盒子默認會自動內減
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左側固定右側自適應</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
width:150px;
height:400px;
float: left;
background: pink;
}
.right {
margin-left: 150px;
height:400px;
background: yellow;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
2)聖盃佈局(兩側固定,中間自適應 )
左右的盒子都寫固定的寬高,然後分別左浮動 右浮動,中間的盒子直接用margin去擠出距離,不寫寬自動內減,右邊html裏面浮動的結構一定要放到標準流盒子的前面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聖盃佈局(兩側固定中間自適應)</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width:100%;
height:400px;
}
.left {
width:150px;
height:400px;
float: left;
background: pink;
}
.right {
width:150px;
height:400px;
float: right;
background: yellow;
}
.center {
margin-left: 150px;
margin-right: 150px;
height:400px;
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
3)右側盒子固定,左側自適應
右側盒子直接寫死寬高,並且浮動,左側盒子直接不寫寬,直接用margin-left去擠出距離,這個盒子默認會自動內減,注意:右側盒子在結構上在左側盒子的前面,先浮動,後標準
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右側固定左側自適應</title>
<style>
* {
margin: 0;
padding: 0;
}
.right {
width:200px;
height:400px;
float: right;
background: green;
}
.left {
margin-right: 200px;
height:400px;
background: yellow;
}
</style>
</head>
<body>
<div class="right"></div>
<div class="left"></div>
</body>
</html>
4)中間固定,兩邊自適應
中間盒子直接寫死寬高,並且定位居中,左右側盒子直接width百分50%,並且浮動,並配合padding和內減去實現自適應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中間固定兩側自適應</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width:80%;
height:400px;
margin:0 auto;
background: gray;
}
.left {
width:50%;
height:100%;
float: left;
background: green;
padding-right: 50px;
box-sizing:border-box;
/*
在設置了box-sizing爲border-box後,
容器的高寬就是實際容器的高寬,
而不是單純指的是內容區的大小。
這時候的高寬計算方式把padding和border大小也算進來了。
*/
}
.right {
width:50%;
height:100%;
float: right;
background: blue;
padding-left: 50px;
box-sizing:border-box;
}
.center {
width:100px;
height: 400px;
background: orange;
margin:0 auto;
position: relative;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
5)等分佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等分佈局</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width:100%;
height:400px;
background: gray;
}
.content {
width:25%;
height:100%;
float: left;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: green;
}
.four {
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content one"></div>
<div class="content two"></div>
<div class="content three"></div>
<div class="content four"></div>
</div>
</body>
</html>