移動端布局之動態rem

番茄西紅柿發布于2019-05-23 15:55 / 1300人閱讀

摘要：注意不能做到屏幕的百分之。因為瀏覽器的最小是按如上改動代碼選項選項選項選項效果入圖可以看到寬度和高度都能按百分比變化了，但是我們會發現一個很麻煩的東西，設計師給我們的設計稿，我們卻必須把每個元素的像素單位換算為。

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

px 像素

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

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

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

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

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

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

2. 移動端的布局

移動端的布局一般就兩種

一是整體縮放

二是百分比布局

先說整體縮放

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

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

為了看到效果，要將這一部分刪除

 <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>選項1li>
            <li>選項2li>
            <li>選項3li>
            <li>選項4li>
            <li>選項5li>
            <li>選項6li>
        ul>
    div>
body>

但這種整體縮放的用戶體驗并不好，所以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">選項1div>
        <div class="child">選項2div>
        <div class="child">選項3div>
        <div class="child">選項4div>
    div>
body>

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

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

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

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

這里可以使用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">選項1div>
        <div class="child">選項2div>
        <div class="child">選項3div>
        <div class="child">選項4div>
    div>
body>

效果入圖

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

3.scss動態換算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;

}

結語

因為本人水平有限，如果有錯漏的地方，還請看官多多指正

本文作者胡志武，寫于2019/5/20，如果要轉載，請注明出處，

如果覺得寫的不錯，請點個贊吧

GPU云服務器云服務器移動端布局 web移動端布局 rem布局動態rem

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7079.html

移動端布局之動態rem

摘要：注意不能做到屏幕的百分之。因為瀏覽器的最小是按如上改動代碼選項選項選項選項效果入圖可以看到寬度和高度都能按百分比變化了，但是我們會發現一個很麻煩的東西，設計師給我們的設計稿，我們卻必須把每個元素的像素單位換算為。動態rem 1. 首先我們先介紹當下的長度單位 px 像素 em 一個M的寬度 / 一個漢字的寬度 1em == 自身的font-size rem 全稱root em 是根元...

huangjinnan 2019-05-22 14:42 評論0 收藏0
移動端自適應布局方案

摘要：背景現在工作中有超過一半的時間用于移動端項目的開發，包括嵌入頁，微信頁面和移動頁。經過研究，我在公司的多個移動端項目使用了布局來解決移動端自適應布局的問題。簡單的說它就是一個相對單位，布局是一個流行的解決移動端響應式布局的方案。背景現在工作中有超過一半的時間用于移動端項目的開發，包括app嵌入頁，微信頁面和移動wap頁。開發移動端頁面跟開發PC頁面的一個大區別就是移動端對響應式布...

zacklee 2019-08-26 11:50 評論0 收藏0
移動端布局方案探究

摘要：歡迎大家學習交流地址我的博客參考文獻移動前端開發之的深入理解原創移動端高清多屏適配方案手機端頁面根據和寬度計算出對應數值語法研究了淘寶，天貓和網易彩票163的wap主頁樣式布局，總結移動端布局方案注意：代碼運行是file協議，在chrome里不支持引用本地文件，會提示跨域錯誤，可以用firefox或者Safari打開當時做的ppt下載: 2015年12月移動端布局方案探究一、基本...

yzzz 2019-08-26 11:46 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

terro 2019-08-29 11:32 評論0 收藏0