项目场景:
抽奖活动(里面图片很多,很多地方需要用定位)
问题描述:
定位用多了,会有很严重的适配问题
刚开始的想法:
想着用vw 的单位 因为大多数手机的宽度都差不多,为了赶进度所以很多地方都用vw 效果虽然达到了,但是屏幕大的和屏幕小的 布局还是非常的乱
解决方案:
最后在网上找到了,rem+媒体查询!!!非常nice
这是一般的机型的尺寸(如果不够可以在加)。
用iphone6 7 8 为基础 先做第一轮的布局 单位全部用rem 不知道怎么转换px 转rem 的 可以下载相关插件
因为rem 单位 所依照的是 根元素的font-size 的大小所进行改变的 所以只需要在下面这些代码的里面改变相应的 font-size 的大小 单位用px就好
/* iphone6 7 8 */
html {
}
/* iphone 5 */
@media screen and (min-width: 320px) {
html {
font-size:13px
}
}
/* iphoneX */
@media screen and (min-width: 360px) {
html {
}
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
html {
}
}
/* ipad */
@media screen and (min-width: 768px) {
html {
}
}
/* ipad pro */
@media screen and (min-width: 1024px) {
html {
}
}
/* pc */
@media screen and (min-width: 1100px) {
html {
}
}