移動端適配方案

1.使用rem

1.1 使用rem前應先計算rem的基準值，執行如下js

//獲取視窗寬度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//獲取htmllet htmlDom = document.getElementsByTagName('html')[0]
//rem的基準值htmlDom.style.fontSize = htmlWidth / 10 + 'px'複製代碼

why:Don't ask me why, you can Baidu

1.2爲了不你每次使用rem都要計算，這裏推薦你用less/sass

此處用less作例子

// 計算rem的函數
.numRem(@name, @px) {    
    @{name}: unit(@px / 37.5, rem);
}
//使用時你會發現這個元素的大小
.user-rem-box {    
    .numRem(width, 100px);    
    .numRem(height, 60px);
    .numRem(margin-left, 5);
    background: pink;
}複製代碼

<div className='user-rem-box'>使用了rem的div</div>複製代碼

pc端顯示效果

移動端顯示效果

⚠️html不要忘記引用
<meta name="viewport" content="width=device-width, initial-scale=1.0">

less的引用及更多的使用

juejin.im/post/5c8e4f…

2.佈局使用flex佈局

2.1舉個🌰栗子

.flex-between {
            display: flex;
            justify-content: space-between;
            border: 1px dotted pink;
            padding: 10px;
        }

        .flex-between-column {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
        }
}
複製代碼

<div class="flex-between">
        <div class="img">
            <img width='100' src='http://b-ssl.duitang.com/uploads/item/201609/26/20160926203611_HXQxk.jpeg' />
        </div>
        <div class="flex-between-column">
            <div>姓名：小仙女</div>
            <div>性別：女</div>
            <div>愛好：寫bug</div>
        </div>
</div>


複製代碼

更多flex佈局方式推薦：
阮一峯   www.ruanyifeng.com/blog/2015/0…

2.2複雜佈局應結合 min-width /grid使用