移动布局的方法

移动端的布局
1:REM
2:百分比布局

而REM有三种方法:媒体查询和REM 2:VW与REM 3:用JS插件
hack1:
@media all and (max-width:640px){
html{font-size: 12px;}
}
@media all and (min-width:641px) and (max-width:750px){
html{font-size: 14px;}
}
@media all and (min-width:751px){
html{font-size: 16px;}
}
设备像素比(dpr)

物理像素(设备实际显示的像素) 逻辑像素(css里面的像素)

dpr = 物理像素 / 逻辑像素


参照大部分用户需求(设备的使用率):
UI 》 640px 750px 1080px;

 

如果设计图宽度为640px和750px 考虑dpr为2
如果设计图1080px 考虑dpr为3
hack2:
单位!
vw 视口的宽 100vw == 视口宽度的100%
vh 视口的高 100vh == 视口高度的100%
vmin
vmax

 

目的:把html中font-size的值的单位设置成vw;


为了方便计算 可以把html中font-size设置成100px;但是100px固定大小不会自动适配。所以把100px转成vw
100px == ?vw

第一种情况:
设计图为750px 》 考虑设备像素比dpr2 》 375px;

100vw == 375px
1vw == 3.75px
?vw == 100px
26.67vw == 100px

第二种情况:
设计图640px >考虑设备像素比dpr2 > 320px

100vw == 320px
1vw == 3.2px
31.25vw == 100px

当设计图为640px 31.25vw
当设计图为750px 26.67vw
hack3:
首先在页面导入flexible.js导入 <script src="js/flexible.js"></script>
去掉mete标签(禁止缩放)的设置

设计图为750px;
从设计图量出header的height为88px;

css设计height 88 / 100 == 0.88rem;

猜你喜欢

转载自www.cnblogs.com/qhya/p/10374992.html
0条评论
添加一条新回复