遇到的一些移動(dòng)端關(guān)于css布局適配問(wèn)題

1.盒子，圖片等寬度設(shè)置首選百分比，次而選擇rem，高度可以是固定值

2.字體可以不用rem，誤差太大了，且不能滿足任何屏幕下字體大小相同,所以建議標(biāo)題類用rem，要求字體大小相同的部分還是用px；

3.遇到內(nèi)容排列顯示的布局，建議放棄float，可以直接使用display:inline-block。

4.慎用position屬性；absolute會(huì)脫離文檔流，relative則不會(huì)

5.如何解決盒子邊框溢出？當(dāng)你把元素寬度設(shè)為 width:100%時(shí)，有時(shí)可能會(huì)遇到元素的寬度超出了屏幕，這時(shí)可對(duì)元素加box-sizing:border-box屬性，用來(lái)指定盒子大小包含邊框和內(nèi)邊距
6.去除button在ios上的默認(rèn)樣式
    -webkit-appearance: none; border-radius: 0;

7.不想讓按鈕touch時(shí)有藍(lán)色的邊框
    outline:none;

8.去除webkit的滾動(dòng)條
    element::-webkit-scrollbar{  
        display: none;
    }

9.遇到過(guò)一個(gè)問(wèn)題就是，當(dāng)手機(jī)端點(diǎn)擊input彈出鍵盤(pán)，整個(gè)視窗的高度就會(huì)變?yōu)闇p去鍵盤(pán)的高度，頁(yè)面底部樣式會(huì)亂，當(dāng)時(shí)解決方法是用js獲取整個(gè)頁(yè)面高度賦值給body，等于說(shuō)在不同的設(shè)備下寫(xiě)死不同的body高度值，底部就不會(huì)亂了

    $("body").css("height",parseInt($(".wrap").height())+parseInt($(".icon-main").height()));

10.如果想改變 placeholder里的文字，需要用c偽類

    ::-webkit-input-placeholder{
        color:#ccc
    }



var scale = 1 / devicePixelRatio;  
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

//flexible中定義<html>font-size
var dpr = window.devicePixelRatio;
console.log(dpr)
var docEl = document.getElementsByTagName("html")[0];
var width = docEl.clientWidth;
console.log(width);
if (width / dpr > 540) {  
    width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容