pc和H5响应式方案

pc响应式:(所有应用在pc端)

解决方案1.媒体查询 2.flex,百分比  3.栅格布局

媒体查询

@media screen and (max-width:768px)

@media screen and (min-width:768px) and (max-width:1280px)

@media screen and (min-width:1281px) and (max-width:1600px)

@media screen and (min-width:1600px)

H5响应式(移动端)

需要解决的问题:1.字体大小 2.元素大小,布局 3.元素边距,内填充

解决方案:

1.淘宝flex插件:https://github.com/amfe/lib-flexible(核心:rem+flex)

2.对视图进行放大缩小

3.rem+flex

4.媒体查询+百分比+flex

猜你喜欢

转载自www.cnblogs.com/qjb2404/p/12192521.html
今日推荐