欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么在移動端布局中實現(xiàn)動態(tài)rem-創(chuàng)新互聯(lián)

怎么在移動端布局中實現(xiàn)動態(tài)rem？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)建站于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都做網(wǎng)站、成都網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元漢中做網(wǎng)站,已為上家服務,為漢中各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

1. 首先我們先介紹當下的長度單位

px 像素

em 一個M的寬度 / 一個漢字的寬度 1em == 自身的font-size

rem 全稱root em 是根元素（html)的font-size

vh 全稱viewport height 100vh == 視口高度

vw 全程viewport width 100vw == 視口寬度

因為網(wǎng)頁的默認font-size：16px 所以1rem默認是16pxchrome 的最小字體像素默認是12px

一個元素在沒有設置font-size的情況下會去繼承父元素的font-size

2. 移動端的布局

移動端的布局一般就兩種

  • 一是整體縮放

  • 二是百分比布局

 先說整體縮放

整體縮放，其實就是將pc端的網(wǎng)頁縮小到手機端屏幕能看到網(wǎng)頁全貌的大小

蘋果手機剛出來時就是使用這種布局，蘋果公司研究發(fā)現(xiàn)世界上大多數(shù)的網(wǎng)頁寬度是980px，然而蘋果手機的寬度像素是320px，所以蘋果手機的瀏覽器用320像素的屏幕寬度去模擬980px的寬度，實現(xiàn)了整體縮放

為了看到效果，要將<meta name="viewport"> 這一部分刪除

 <style>
        div{
            width:980px;
            margin:0 auto;
            background:#f0f0f0;
        }
        ul{
            list-style:none;
        }
        li{
            float:left;
            margin-left:10px;    
        }
        clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>選項1</li>
            <li>選項2</li>
            <li>選項3</li>
            <li>選項4</li>
            <li>選項5</li>
            <li>選項6</li>
        </ul>
    </div>
</body>

怎么在移動端布局中實現(xiàn)動態(tài)rem

但這種整體縮放的用戶體驗并不好，所以pass，我們來講百分比布局

百分比布局

//百分比布局
<style>
        .child{
            background-color:#ccc;
            text-align:center;
            width:40%;
            margin:10px 5%;
            float:left;
        }
        .clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="parent clearfix">
        <div class="child">選項1</div>
        <div class="child">選項2</div>
        <div class="child">選項3</div>
        <div class="child">選項4</div>
    </div>
</body>

怎么在移動端布局中實現(xiàn)動態(tài)rem

可以看到百分比布局能自動適應屏幕寬度。

但是百分比布局有個缺點，寬度和高度不能做任何關聯(lián)

可以看上面的gif圖，寬度一直變長，然而高度沒有變化

為了讓選項方塊的高度是寬度的一半，實現(xiàn)該效果我們需要知道屏幕的寬度，再來確定選項的寬度和高度

這里可以使用vw，但vw的兼容性比較差，我們可以使用rem來代替vw

首先rem是以html的font-size為基準的，所以我們可以讓html的font-size==pageWidth

<script>
	let pageWidth = window.innerWidth;
    document.write('<style>html{font-size:'+ pageWidth/10 +'px}</style>')
</script>

為了更好的使用rem,這里1rem等于屏幕寬度的10分之1。注意不能做到1rem==屏幕的百分之1。因為瀏覽器的最小font-size是12px ;

按如上改動代碼

<style>
.child{
            background-color:#ccc;
            text-align:center;
            width:4rem;
            height:2rem;
            margin:10px 0.05rem;
            float:left;
            line-height:2rem;
        }
        .clearfix::after{
            content:"";
            display:block;
            clear:both;

        }
</style>
</head>
<body>
    <div class="parent clearfix">
        <div class="child">選項1</div>
        <div class="child">選項2</div>
        <div class="child">選項3</div>
        <div class="child">選項4</div>
    </div>
</body>

效果入圖

怎么在移動端布局中實現(xiàn)動態(tài)rem

可以看到寬度和高度都能按百分比變化了，但是我們會發(fā)現(xiàn)一個很麻煩的東西，設計師給我們的設計稿，我們卻必須把每個元素的像素單位換算為rem。這里我們就要scss來換算px了

3.scss動態(tài)換算px

@function pxToRem($px){
    @return $px/$designWidth*10+rem;//10是把整個屏幕分為10rem
}
$designWidth:320;//設計稿寬度
.child{
    background-color:#ccc;
    text-align:center;
    width:pxToRem(128);//4rem;
    height:pxToRem(64);//2rem;
    margin: 10px pxToRem(1.6);
    float:left;
    line-height:pxToRem(64);
}
.clearfix::after{
    content:"";
    display:block;
    clear:both;

}

關于怎么在移動端布局中實現(xiàn)動態(tài)rem問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關知識。

新聞標題：怎么在移動端布局中實現(xiàn)動態(tài)rem-創(chuàng)新互聯(lián)
文章分享：http://chinadenli.net/article30/heeso.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設、云服務器、網(wǎng)頁設計公司、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站