上個周周末,接手了一個移動端的(外包)小項目,一直著手于PC端,對移動端還是一知半解,所以這也是我的一個挑戰(zhàn),因此,今天心血來潮,總結(jié)一些移動端的基礎知識和技巧供自己以后方便查閱,歡迎大家補充或轉(zhuǎn)載:
一.單位(px,em,rem)
1.px:屏幕設備物理上能顯示出的最小的一個點,不同設備上點的長寬,比例不一定相同;
2.em/rem:相同點:都是一個相對大小的值;不同點:em是相對父級元素,rem是相對html(默認值視瀏覽器而定,Chrome的默認為16px);
rem單位在移動端前端開發(fā)很流行。rem單位確實好處蠻多的,它是相對于根節(jié)點,讓我們整個網(wǎng)站單位可以統(tǒng)一。還可以讓我們的字體更好的自適應網(wǎng)站的大小,但是,你用過了就知道,它會出現(xiàn)一個問題:用Chrome瀏覽器打開你做的網(wǎng)站的時候,有時候會出現(xiàn)字體很大的情況。但是刷新一下頁面就好了。
之所以會出現(xiàn)這種情況,原因是因為我們?yōu)榱擞嬎惴奖?,將原本默認1rem=16px修改1rem=10px;因此,我們在html中通常做了如下設置:
html{ font-size:62.5%;/*10÷16×100=62.5% 1rem=10px*/ }
但是呢,Chrome瀏覽器有時候會忽略了html的設置,于是在初始化頁面的時候,出現(xiàn)了上面字體過大的情況。仔細