首頁(yè)
果殼學(xué)院
濟(jì)寧網(wǎng)站建設(shè)
實(shí)用的移動(dòng)端布局技巧

實(shí)用的移動(dòng)端布局技巧

濟(jì)寧網(wǎng)站建設(shè)，濟(jì)寧微信公眾號(hào)開(kāi)發(fā)，濟(jì)寧seo優(yōu)化推廣，濟(jì)寧手機(jī)APP開(kāi)發(fā)，濟(jì)寧微商城開(kāi)發(fā)，濟(jì)寧做網(wǎng)站，濟(jì)寧網(wǎng)絡(luò)公司，濟(jì)寧果殼科技

濟(jì)寧果殼科技

2017-12-08 17:25:19

0

4636

1.添加meta，使得網(wǎng)頁(yè)在手機(jī)端能正常瀏覽

<html>

2.考慮是使用px，還是使用rem
對(duì)于只需要適配少部分手機(jī)設(shè)備，且分辨率對(duì)頁(yè)面影響不大的，使用px即可；
如果需要高精度還原，適配各種手機(jī)，最好還是使用rem吧

1）使用px布局，寬度可使用百分比伸縮，高度使用固定像素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
width: 320px;
height: 568px;
background:#fafafa;
border:1px solid #ccc;
}
.div1{
width: 40%;
height: 60px;
background: #FF0000;
float:left;
}
.div2{
width: 60%;
height: 60px;
background: #FF7E00;
float:left;
}
</style>
</head>
<body>
<div class="div1">40%</div>
<div class="div2">60%</div>
</body>
</html>

效果如下

微信圖片_20171208171432.png

2）使用rem的話，需要有一個(gè)輔助才能打出高額的傷害；從常用的兩個(gè)輔助中選擇一個(gè)；
輔助一，使用@media，根據(jù)屏幕大小自動(dòng)調(diào)整
可以看看這篇文章詳細(xì)介紹《CSS3的REM設(shè)置字體大小》

輔助二，使用js動(dòng)態(tài)計(jì)算，這個(gè)簡(jiǎn)直好用的不得了，簡(jiǎn)直完美還原設(shè)計(jì)稿

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>template</title>
<script>
//這個(gè)是小米官網(wǎng)的寫法
! function(n) {
var e = n.document,
t = e.documentElement,
i = 720, //設(shè)計(jì)圖尺寸
d = i / 100, //1rem = 100px
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function() {
var n = t.clientWidth || 320;n > 720 && (n = 720);
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);
</script>
<style>
*{box-sizing: border-box;}
body{margin: 0;padding: 0;font-size: 16px;}
.block{background: #1e90ff;width: 7.2rem;height: 2rem;}
.block2{background: #ef4437;width: 3.6rem;height: 3.6rem;}
</style>
</head>

<body>
<div class="wrap">
<div class="block">100% 7.2rem 設(shè)計(jì)圖尺寸720，1rem=100px</div>
<div class="block2">50% 3.6rem</div>
</div>
</body>
</html>

效果如下

微信圖片_20171208171653.png

3.頁(yè)面樣式重置，這個(gè)在pc端還是移動(dòng)端都會(huì)用到的

/*css初始化*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font-size:16px;font-family: "微軟雅黑","microsoft yahei","microsoft sans serif";background: #ededed;color: #313131;}
a,a:hover{text-decoration:none;color:inherit;}
em,i{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
input,textarea{outline: none;font-family: "微軟雅黑","microsoft yahei";}
*{box-sizing: border-box;} /*使用border-box盒模型使得計(jì)算位置、大小更方便*/
input[type='submit'],input[type='button'],input[type='reset']{-webkit-appearance: none;}/*消除iPhone上按鈕顯示怪異的情況*/

4.使用一屏布局
這個(gè)是我在查看一些UI框架發(fā)現(xiàn)的東西，整個(gè)頁(yè)面分三塊不超過(guò)一屏，header、contaner、footer。
內(nèi)容都放在container中，超過(guò)就overflow-y:scroll;
這個(gè)其實(shí)挺好用的，使得頁(yè)面結(jié)構(gòu)清晰，布局容易

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<title></title>
<style type="text/css">
body,html{
position: absolute;
margin: 0;
padding: 0;
width: 320px;
height: 100%;
}
*{box-sizing: border-box;}
.g-page{
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: #FAFAFA;
}
.g-header{
position: absolute;
top: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: #EF4437;
color: #fff;
text-align: center;
z-index: 10;
}
.g-content{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
background: #008000;
}
.g-footer{
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
background: #666;
color: #fff;
text-align: center;
}
.g-header ~ .g-content{
top: 40px;
}
.g-footer ~ .g-content{
bottom: 40px;
}
.div1{
height: 300px;
background: #909090;
}
.div2{
height: 300px;
background: #82615f;
}
.div3{
height: 300px;
background: #1e90ff;
}
</style>
</head>
<body>
<div class="g-page">

<div class="g-header">頭部</div>

<div class="g-footer">頁(yè)腳</div>

<div class="g-content">
<div class="div1">
內(nèi)容
</div>
<div class="div2">
內(nèi)容
</div>
<div class="div3">
內(nèi)容
</div>
</div>

</div>
</body>
</html>

效果如下

微信圖片_20171208171937.png

5.左邊定寬，右邊自適應(yīng)的布局，我們會(huì)經(jīng)常用到

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<style>
body{margin: 0;padding: 0;}
*{box-sizing: border-box;}
.container-1{
display: flex;
height: 150px;
margin-bottom: 40px;
}
.container-1 .left{
width: 150px;
height: 100%;
background: #1E90FF;
}
.container-1 .right{
flex: 1;
height: 100%;
background: #ef4437;
}

.container-2{
position: relative;
width: 100%;
height: 150px;
margin-bottom: 40px;
}
.container-2 .left{
position: absolute;
width: 150px;
height: 100%;
background: #EF2322;
z-index: 2;
}
.container-2 .right{
position: absolute;
left: 0;
width: 100%;
height: 100%;
padding-left: 150px;
background: #1E90FF;
}

.container-3{
overflow: hidden;
height: 150px;
}
.container-3 .left{
float: left;
width: 150px;
height: 100%;
background: #1E90FF;
}
.container-3 .right{
/*width: 100%;*/
height: 100%;
padding-left: 150px;
background: #EF2322;
}
</style>
</head>
<body>
<div style="width: 800px;margin: 0 auto;">
<div class="container-1">
<div class="left"></div>
<div class="right"></div>
</div>

<div class="container-2">
<div class="left"></div>
<div class="right"></div>
</div>

<div class="container-3">
<div class="left">2222222222222</div>
<div class="right">1111111111111111111111111111111111111111111111<br>222222222222222</div>
</div>
</div>

</body>
</html>

6.模塊化、組件化開(kāi)發(fā)，防止css命名重復(fù)，提高開(kāi)發(fā)效率
這個(gè)對(duì)我這個(gè)英語(yǔ)詞匯量不大的來(lái)說(shuō)，簡(jiǎn)直是福音啊，
以前寫css老是怕重名，寫的各種奇怪命名，效率還低，
自從有了這個(gè)媽媽再也不用擔(dān)心如何優(yōu)雅的寫出代碼

7.一像素的問(wèn)題
在高分屏上寫一個(gè)像素邊框，那顯示的活脫脫的就是兩個(gè)像素，
設(shè)計(jì)師不滿意，老板不滿意；
我們可以用偽元素和css3來(lái)解決

.item{
width:2rem;
height:0.5rem;
}
.item:after{
content: " ";
position: absolute;
left: 0;
right: 0;
height: 1px;
z-index: 2;
bottom: 0;
border-bottom: 1px solid #D9D9D9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}

如果你想做一個(gè)手機(jī)網(wǎng)站微官網(wǎng)微商城，來(lái)濟(jì)寧果殼科技，這里應(yīng)有盡有~~