移动端适配方案

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.cn/post/684490…

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使用