移动端&pc端 响应式布局 or rem布局 & flex布局

本文主要对以下问题的思考

当我门开发一个h5页面时候,到底是 pc和h5共用一套页面 还是分开开发两套呢?

现象分析:

网易、淘宝等大厂 是 分开开发,也就是 pc一套,h5一套
拉钩。某些个人博客 公用一套

结论

需要分情况而定,像网易淘宝此类的pc端页面复杂的 是适合分开两套开发,因为h5和pc端布局差异较大,不方便做响应式开发,
而个人博客这样的 pc端就是一个列表而已 最多加一个侧边栏的 这种简单的页面 是比较适合 做响应式媒体查询的 
具体的布局方式分析,其实网上有很多很详细的教程了 我在这里只是简单说明
  • rem布局+flex

    1 设置视口

    2 根据公司ui根据那个尺寸的手机出的图 比如是iPhone6 (750px) 动态改变跟页面的fontsize
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    得出fontsize=100px
    3 得出整体宽度,得出画一个100px宽的盒子需要多少rem
    那么整个屏幕的宽度就是 7.5rem
    ui图100px的盒子 等于 2rem

    4 通过媒体查询改变body的fontsize

    5 所有的字体依然按照px写,只有盒子宽度按照rem去写

    可参考:
    http://web.jobbole.com/93253/
    http://www.cnblogs.com/lyzg/p/4877277.html

  • 响应式布局 (媒体查询)

    就根据 不同的几个宽度 动态设置我们body的最大宽度就行了,不要全部是100%
    效果可参考 http://justyeh.com/

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/8064381.html

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值