1.移動端字體大小適配
利用媒體查詢器設置根元素的字體大小，并在開發(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始終在頁面的最下方：內容不足時底挫，footer在頁面的底部，內容超過一頁時创倔，footer在頁面所有內容的下方可款。
主要實現：三個容器：
- main-wrap：設置高度
min-height：100% - content：設置高度
height:100%padding-bootom:100px,padding值等于footer高度拣挪，相當于給footer 騰出 一個位置 - footer：設置高度
height:100px;margin-top:100px;footer的實際位置是在main-wrap下面。當內容不足一頁時宵晚，它在頁面下方是看不見的垂攘，但是使用一個負邊距使其進入可視區(qū)域。這個負邊距正好等于content的padding-bottom坝疼，所以不會擋住content中的內容搜贤。內容滿了一頁時，自動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;
}
<!--結構-->
<div class="main-wrap clearfix">
<div class="content">
<!--內容-->
</div>
</div>
<div class="footer">
<!--頁尾始終在頁面最下方-->
</div>
3.fixed header &footer 固定頂部&底部
在最外層容器中，使用三個部分耕陷，header掂名、content、footer哟沫，由于都是body的直接子元素饺蔑，可以使用絕對定位，然后設置content的top bottom值嗜诀，使其等于header footer的高度猾警，并同時設置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;
}
<!--結構-->
<body>
<div class="header">
<p>header</p>
</div>
<div class="main-wrap clearfix">
<div class="content">
<!--內容-->
</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下頁面滑動卡頓
當ios上滾動某個元素發(fā)生卡頓時，為需要滾動的容器添加如下代碼：
.container {
-webkit-overflow-scrolling: touch;
}
6.1px 邊框實現
由于各廠商的屏幕物理像素與邏輯像素的不同拂蝎，1px的邊框在某些屏幕上顯得很粗穴墅。使用媒體查詢器，條件為當前屏幕的像素密度min-device-pixel-ratio温自，將其縮小玄货。同時邊框使用偽元素實現。
.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);
}
}
