移动端布局

Posted 2021-03-18 liuxuhui

移动端布局

1.1080*1920.png
2.750  .png
3.切图
4.布局的目标：让设计图等比例呈现在各个不同的设备上
5.解决方案核心思想：
        提供一个固定的形式   
        让它在不同的设备上呈现不同的值
6.百分比布局 100% 移动端布局首选+flex;
        能用百分比决不用rem
7.rem布局

假设我们在给一个750px的设备布局

    $device-list:320px,365px,360px,412px,414px,750px;
html{
    @each $device in $device-list{
        @media screen and(min-width:#{$device}){
            font-size:100 * ($device/750);
        }
    }
}   
body{
    font-size:16px;
}

• 移动设备的实际像素 1080*1920
• 移动设备的逻辑像素 320
• 移动设备上浏览器应用的viewport
  viewport 980px渲染
  750 414 375 320
  100px * (414/750)

移动端的浏览器会根据这条meta标签调整自己的viewport

<meta name="viewport" content="width=device-width">
rem 倍数  html的font-size值  
em相对于所在区域的font-size