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

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

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

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

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

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

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

8.去除webkit的滾動條
    element::-webkit-scrollbar{  
        display: none;
    }

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

    $("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)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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