移动端适配方案

  1. 基础知识
    1. 物理像素
      1. 屏幕的分辨率
      2. 设备能控制显示的最小单位,可以把物理像素看成对应的像素点
    2. 设备独立像素 & css像素
      1. 设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素(比如:CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”),然后由相关系统转换为物理像素。
    3. DPR、DPI、PPI
      1. DPR: 设备像素比,物理像素/设备独立像素 = dpr, 一般以Iphon6的dpr为准 dpr = 2
      2. PPI: 一英寸显示屏上的像素点个数
      3. DPI:最早指的是打印机在单位面积上打印的墨点数,墨点越多越清晰
        在这里插入图片描述
        在这里插入图片描述
    4. 视口
      1. 布局视口:在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或其他值,一般都比移动端浏览器可视区域大很多,所以就会出现浏览器出现横向滚动条的情况。
        在这里插入图片描述
      2. 视觉视口:用户通过屏幕看到的页面区域,通过缩放查看显示内容的区域,在移动端缩放不会改变布局视口的宽度,当缩小的时候,屏幕覆盖的css像素变多,视觉视口变大,当放大的时候,屏幕覆盖的css像素变少,视觉视口变小。
        在这里插入图片描述
      3. 理想视口:一般来讲,这个视口其实不是真是存在的,它对设备来说是一个最理想布局视口尺寸,在用户不进行手动缩放的情况下,可以将页面理想地展示。那么所谓的理想宽度就是浏览器(屏幕)的宽度了。
    5. 扩展内容
      1. 视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕,由苹果公司在2010年在iPhone 4发布会上首次推出营销术语。
      2. Iphone的dpr = 2; 人类肉眼分辨的极限
      3. 问题: Iphone6的dpr为多少?Iphone6Plus比Iphone6显示图像清晰吗?
  2. 适配方案
    1. viewport适配方案
    2. rem适配方案
    3. 小程序适配方案
      1. Iphon6: 1rpx = 1物理像素 = 0.5px
      2. 微信官方提供的换算方式:
        1. 1.以iPhone6的物理像素个数为标准: 750;
        2. 2.1rpx = 目标设备宽度 / 750 * px;
        3. 3.注意此时底层已经做了viewport适配的处理,即实现了理想视口
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qumy97

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值