移动端布局

移动端布局

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

rem 倍数 html的font-size值
em相对于所在区域的font-size