1.移動端字體大小適配
利用媒體查詢器設(shè)置根元素的字體大小，并在開發(fā)時使用rem作為單位
@media screen and (min-width: 320px) {
html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
html {font-size: 18px;}
}
@media screen and (min-width: 440px) {
html {font-size: 20px;}
}
@media screen and (min-width: 480px) {
html {font-size: 22px;}
}
@media screen and (min-width: 640px) {
html {font-size: 28px;}
}
2.sticky footer
footer始終在頁面的最下方：內(nèi)容不足時，footer在頁面的底部，內(nèi)容超過一頁時，footer在頁面所有內(nèi)容的下方。
主要實現(xiàn)：三個容器：
- main-wrap：設(shè)置高度
min-height：100% - content：設(shè)置高度
height:100%padding-bootom:100px,padding值等于footer高度，相當(dāng)于給footer 騰出 一個位置 - footer：設(shè)置高度
height:100px;margin-top:100px;footer的實際位置是在main-wrap下面。當(dāng)內(nèi)容不足一頁時，它在頁面下方是看不見的，但是使用一個負(fù)邊距使其進入可視區(qū)域。這個負(fù)邊距正好等于content的padding-bottom，所以不會擋住content中的內(nèi)容。內(nèi)容滿了一頁時，自動content撐大main-wrap，將footer向下頂。
/*css*/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.main-wrap {
min-height: 100%;
width: 100%;
height: auto!important;
}
.content {
width: 100%;
padding-bottom: 100px;/*等于footer高度*/
}
.footer {
height: 100px;
margin-top: -100px;/*等于高度*/
background-color: yellow;
clear: both;
}
<!--結(jié)構(gòu)-->
<div class="main-wrap clearfix">
<div class="content">
<!--內(nèi)容-->
</div>
</div>
<div class="footer">
<!--頁尾始終在頁面最下方-->
</div>
3.fixed header &footer 固定頂部&底部
在最外層容器中，使用三個部分，header、content、footer，由于都是body的直接子元素，可以使用絕對定位，然后設(shè)置content的top bottom值，使其等于header footer的高度，并同時設(shè)置overflow:scroll,這樣頁面就可以正常的滾動。此辦法可以解決Safari中喚起鍵盤時，fixed定位的footer錯位的問題。
/*css*/
* {
margin: 0;
padding: 0;
}
.main-wrap {
position: absolute;
width: 100%;
top: 50px;/*等于header高度*/
bottom: 100px;/*等于footer高度*/
overflow: scroll;
background-color: #00bbff;
}
.header,.footer{
position: absolute;
left: 0;
right: 0;
background-color: yellow;
text-align: center;
font-size: 3em;
}
.header {
height: 50px;/*等于main-wrap的top值*/
top: 0;
}
.footer {
height: 100px;/*等于main-wrap的bottom值*/
bottom: 0;
}
<!--結(jié)構(gòu)-->
<body>
<div class="header">
<p>header</p>
</div>
<div class="main-wrap clearfix">
<div class="content">
<!--內(nèi)容-->
</div>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
4.clearfix 偽元素清除浮動
.clearfix:after {
content:"\200B"; /*`\200B`是一個零寬度空格*/
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;}/*IE/7/6*/
5.ios下頁面滑動卡頓
當(dāng)ios上滾動某個元素發(fā)生卡頓時，為需要滾動的容器添加如下代碼：
.container {
-webkit-overflow-scrolling: touch;
}
6.1px 邊框?qū)崿F(xiàn)
由于各廠商的屏幕物理像素與邏輯像素的不同，1px的邊框在某些屏幕上顯得很粗。使用媒體查詢器，條件為當(dāng)前屏幕的像素密度min-device-pixel-ratio，將其縮小。同時邊框使用偽元素實現(xiàn)。
.border-1px{
position: relative
}
.border-1px:after{
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid black;
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
.border-1px:after{
-webkit-transform :scaleY(0.7);
transform :scaleY(0.7);
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
.border-1px:after{
-webkit-transform :scaleY(0.5);
transform :scaleY(0.5);
}
}
