开发者社区> 问答> 正文

移动端适配

移动端适配

展开
收起
问答小能手! 2021-02-05 19:24:50 4449 0
1 条回答
写回答
取消 提交回答
  • 来自昆仑山,真名陆离。

    1.rem适配:本质是布局等比例的缩放,通过动态设置html的font-size来改变rem的大小。
    动态改写【meta】标签中的缩放比例
    给【html】元素添加data-dpr属性,并且动态改写data-dpr的值
    给【html】元素添加font-size属性,并且动态改写font-size的值
    用插件将将px转成rem。

    2.vw 方案: 如果设计稿使用750px宽度,则100vw = 750px,即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。如果不想自己计算,我们可以使用PostCSS的插件postcss-px-to-viewport,让我们可以直接在代码中写px。

    3.搭配rem和vw 给根元素大小设置随着视口变化而变化的vw单位,这样就可以实现动态改变其大小。限制根元素字体大小的最大最小值,配合body加上最大宽度和最小宽度

    2021-02-05 19:25:52
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
手淘iOS性能优化探索 立即下载
手淘IOS性能优化探索 立即下载
混合APP开发模式为什么成为主流 立即下载