1.假设设计稿是750px
2.假设这个时候html字体大小为100px
3.那么在320px设备的时候 字体大小为 100/750*320
4.只要根据这个比例在不同设备设置rem基准值(html字体大小)即可
5.改变rem基准值有两种方式:媒体查询或Javascript
/*假设的设备 320px 414px 640px */
@media (min-width: 320px) {
html{
font-size: 50px;
}
}
@media (min-width: 414px) {
html{
font-size: 64.6875px;
}
}
@media (min-width: 640px) {
html{
font-size: 100px;
}
}
<meta name="viewport" content=">
<script src="flexible.js">script>
//适配主流设备十几种
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdWidth:750px;
//预设基准值
@baseFontSize:100px;
//设备的种类
@len:length(@adapterDeviceList);
//适配函数
.adapterMixin(@index) when ( @index > 0){
@media (min-width: extract(@adapterDeviceList,@index)){
html{
font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
}
}
.adapterMixin( @index - 1);
}