关于移动端布局

矫情吗；* 2022-02-04 03:09 313阅读 0赞

# 关于移动端布局 #

## 移动端布局的问题 ##

如今手机设备多种多样，屏幕大小各不相同，下面说一下如今的几种移动端布局.  
1. 宽度百分比布局 + px布局.  
先说一下，这种布局虽然我现在没有用，但是还是有见到过，这种布局如果你按照750设计图来做的话其实在主流手机屏幕上展示都挺不错的，但是如果屏幕非主流的话，那显示出来的效果就很差了，所以这种布局不建议使用.  
2. 媒体查询 + px布局  
这种布局用的话还是可以的，但是媒体查询毕竟也是在一个区间内，而且不同的区间段应该写多大的px呢？这也是一个问题.  
3. rem布局 + flex布局  
ok，说到正题了，这是我现阶段采用的布局，关于flex布局，强烈推荐阮一峰的关于flex布局这一章，或者菜鸟教程内的内容也可以，跟阮一峰的一样。现在重点说一下rem布局.

### 为什么采用rem布局 ###

1.  rem布局的原理  
    首先说一下rem这个单位，rem这个单位是根据html的根字体来确定的，现在的浏览器默认的html根字体是16px，也就是1rem = 16px，你可以做一下实验：
    
        html {
         font-size: 100px;
        }
        div {
        width: 1rem;
        }
    
     *  1
     *  2
     *  3
     *  4
     *  5
     *  6
    
    这样最后div呈现出来的宽度其实是100px，知道了这个原理，那么如果我们使用rem单位布局，然后根据手机屏幕大小改变html的根字体的大小，这样不就实现了手机屏幕适配吗？
2.  如何动态改变html根字体的大小.  
    网上关于这类的js很多，我说一下我正在使用的js，感觉比较简单而且容易理解:

一般设计稿都是按照750来给的，750也就是iphone6的设计稿，是实体手机宽度的2倍，所以上面的函数在iphone6上面设置的根字体其实是50px，那样我们在写css的时候，直接按照设计稿量出的px单位除以100，然后得出的值就是rem的值，关于rem转换，sublime和vscode上面有css转rem的插件，然后也可以写一个scss的转换函数来进行转换:

@function rem($px){
        @return ($px / 100) * 1rem;
    }