在页面缩放的时候,原本的使用数字设置布局就会被打乱,一些css代码,像margin,图片轮播难设置百分比,想问问各位大佬有没有办法处理
如果你要全尺寸适配的话,我建议你可以使用rem布局,我自己写小demo都是这么干的,什么小手机还是平板都是一样的显示,如果是公司项目的话肯定是得媒体查询做不同的适配页面的。
- 我是用rem加vw的方式做全局适配。因此你会看到我使用长度一般是
rem/20
这种奇怪的单位,1rem等于html的font-size100/750vw*20
,1vw是百分之一屏幕宽,则750rem/20
就是100vw,就是一整个屏幕宽度,一般的ui设计图是750px,也就是只要把设计图上的1px当作1rem/20单位就可以进行任何设备的适配了。- less可以自动计算,css你得将上方尺寸有乘除的部分自己计算后写。
- 有个副作用就是导入组件库,一般的组件库仍然是px,而我们全局自己写的内容是rem,回导致缩放时组件的尺寸会有问题,所以导入组件也得自行去深度修改样式。
html {
font-size: 100/750vw*20;
}