zoukankan      html  css  js  c++  java
  • 手机端页面自适应解决方案—常见问题(转)

    1.问:为啥手机网页效果图宽度是要640或者750的,我非得弄个666的不行咩?

    答:老实说当然可以,不过为了规范,640或者750是相对合适的。
    拿Iphone 5s 举例,它的css像素宽度是320px,由于它的dpr=2,所以它的物理像素宽度为320 × 2 = 640px,这也就是为什么,你在5s上截了一张图,在电脑上打开,它的原始宽度是640px的原因。
    那 iphone 6 的截图宽度呢? 375 × 2 = 750
    那 iphone 6 sp 的截图宽度呢? 414 × 3 = 1242
    以此类推,你现在能明白效果图为什么一般是 640 ,750 甚至是 1242 的原因了么?(真没有歧视安卓机的意思。。。)

    2.问:宽度用rem写的情况下, 在 iphone6 上没问题, 在 iphone5上会有横向滚动条,何解?

    答:假设你的效果图宽度是750,在这个效果图上可能有一个宽度为7rem(高清方案默认 1rem = 100px)的元素。我们知道,高清方案的特点就是几乎完美还原效果图,也就是说,你写了一个宽度为 7rem 的元素,那么在目前主流移动设备上都是7rem。然而,iphone 5 的宽度为640,也就是6.4rem。于是横向滚动条不可避免的出现了。
    怎么办呢? 这是我目前推荐的比较安全的方式:如果元素的宽度超过效果图宽度的一半(效果图宽为640或750),果断使用百分比宽度,或者flex布局。就像把等屏宽的图片宽度设为100%一样。

    3.问:不是 1rem = 100px吗,为什么我的代码写了一个宽度为3rem的元素,在电脑端的谷歌浏览器上宽度只有150px?

    答:先说高清方案代码,再次强调咱们的高清方案代码是根据设备的dpr动态设置html 的 font-size,
    如果dpr=1(如电脑端),则html的font-size为50px,此时 1rem = 50px
    如果dpr=2(如iphone 5 和 6),则html的font-size为100px,此时 1rem = 100px
    如果dpr=3(如iphone 6 sp),则html的font-size为150px,此时 1rem = 150px
    如果dpr为其他值,即便不是整数,如3.4 , 也是一样直接将dpr 乘以 50 。

    再来说说效果图,一般来讲,我们的效果图宽度要么是640,要么是750,无论哪一个,它们对应设备的dpr=2,此时,1 rem = 50 × 2 = 100px。这也就是为什么高清方案默认1rem = 100px。而将1rem默认100px也是好处多多,可以帮你快速换算单位,比如在750宽度下的效果图,某元素宽度为53px,那么css宽度直接设为53/100=0.53rem了。

    然而极少情况下,有设计师将效果图宽定为1242px,因为他手里只有一个iphone 6 sp (dpr = 3),设计完效果图刚好可以在他的iphone 6 sp里查看调整。一切完毕之后,他将这个效果图交给你来切图。由于这个效果图对应设备的dpr=3,也就是1rem = 50 × 3 = 150px。所以如果你量取了一个宽度为90px的元素,它的css宽度应该为 90/150=0.6rem。由于咱们的高清方案默认1rem=100px,为了还原效果图,你需要这样换算。当然,一个技巧就是你可以直接修改咱们的高清方案的默认设置。在代码的最后 你会看到 flex(100, 1) ,将其修改成flex(66.66667, 1)(感谢简友:V旅行指出此处错误! 2017/3/24)就不用那么麻烦的换算了,此时那个90px的直接写成0.9rem就可以了。

    4.问:高清方案在微信上,有时候字体会不受控制变的很大,怎么办?

    答:点我,这是我对该问题的总结

    5.问:我在底部导航用的flex感觉更合适一些,请问这样子混着用可以吗?

    答:咱们的rem适合写固定尺寸。其余的根据需要换成flex或者百分比。源码示例中就有这三种的综合运用。

  • 相关阅读:
    c# 三种取整方法 向上取整 向下取整 四舍五入
    Lambda表达式对DataRow处理
    Dapper数据库字段和model属性映射
    union limit
    北邮五十题
    搜索____深搜 学易错点
    动态规划____有重叠子问题的搜索,都可以转为记忆化搜索
    64位 __int 与 long long写法
    做做 卡特兰数 与 卡米歇尔数
    vector 有点麻烦啊 能简单点么?
  • 原文地址:https://www.cnblogs.com/snowhite/p/9965219.html
Copyright © 2011-2022 走看看