移動端開發--rem和像素如何使用!


剛開始做移動端的開發的時候,大多時候是在使用 像素(PX)來寫頁面和布局的,但是使用下來,還是有多少不好用!

隨之就開始用 rem 來寫,rem寫的結果是頁面放到一些屏幕上,字體過小,如果頁面渲染用了rem,但是網站后台編輯器里的字體大小是用像素來做的,這就可能出現一種情況,rem設置的像素要比編輯器里設置的像素要小很多,所以所有的都用 rem 來設置大小,還是有些許問題。

互聯網技術,想來想去還是看看阿里是怎么做的?打開淘寶的手機端,他使用的 px+rem混合做的,經過測試確實這種比較好!

下面就具體說下兩種 rem 設置大小的方法

第一種:按照設計稿750的大小來設置:

<style type="text/css">
html{font-size:100px;}
</style>
<script type="text/javascript">
var winW = $(window).width();
if (winW > 750) {winW = 750;}
$('html').css('font-size', winW / 7.5);
$(window).resize(function () {
    winW = $(window).width();
    if (winW > 750) {winW = 750;};
    $('html').css('font-size', winW / 7.5);
});
</script>

設置html的大小為100px,那么頁面的 750px 就相當於是 7.5rem; 100px 就是 1rem;1px就是0.01rem;也就是頁面上多少像素,轉化為 rem 就是除以100 即可;

第二種:按照設計稿540的大小來設置:(淘寶的做法)

<style type="text/css">
html{font-size:54px;}
</style>
<script type="text/javascript">
var winW = "";
$(window).resize(function(){partCom();});
partCom();
function partCom(){
    winW = $(window).width(); 
    $('html').css('font-size', winW / 10);
};
</script>

設置html的大小為54px;540px就是10rem;54px等於1rem;1px等於1/54像素;這種做的話,多少像素就必須計算出多少rem;

<style type="text/css">
div.jisuan{width: 100%; height:1.4814rem; line-height: 0.6296rem; background:rgba(0,0,0,0.5); position: absolute; top:0px; font-size:12px;}
div.jisuan input{width: 1.8518rem; height: 0.5555rem; line-height: 0.5555rem; font-size:16px; text-indent: 0.1851rem; border:none; outline: none;}
div.jisuan input.px{margin-left: 0.5555rem;}
div.jisuan span.dy{font-size:14px; color:#fff;}
div.jisuan span.px{font-size:24px; color: #fff;}
</style>
<div class="jisuan">
    <div class="pxtorem">
        <input type="text" class="px" value="540">
        <span class="px">px</span>    
        <span class="dy">=</span>
        <input type="text" class="rem" value="10">
        <span class="px">rem</span>
    </div>
    <script>
    (function(){
    /* 計算
    540px = 10rem
    1px = (10/540) rem
     */
    $("div.pxtorem input.px").blur(function(){
        $("div.pxtorem input.rem").val(Math.round($("div.pxtorem input.px").val()*(10/540)*10000)/10000);
    });
    })();
    </script>    
    <div class="remtopx">
        <input type="text" class="px" value="10">
        <span class="px">rem</span>    
        <span class="dy">=</span>
        <input type="text" class="rem" value="540">
        <span class="px">px</span>
    </div>
    <script>
    (function(){
    /* 計算
    10rem = 540px
    1rem = (540/10) px
     */
    $("div.remtopx input.px").blur(function(){
        $("div.remtopx input.rem").val(Math.round($("div.remtopx input.px").val()*(540/10)*10000)/10000);
    });
    })();
    </script>
</div>

總結:總的來說,第一種方法更加方便,也可以用;但是更推薦第二種,參考淘寶的做法來寫移動打的頁面;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM