移动端适配

视觉稿规范2点:1 以iphone6的 375 * 667 为基点;

       2  对于retina屏幕(dpr=2),为了高清,视觉稿的画布是基准的2倍: 就会变成750*1334;

      在普通屏幕下,1个css像素 对应 1个物理像素;在retina屏幕下,1个css像素对应4个物理像素(也就是说,iphone6下 200*300的img标签 需要提供400*600的图片,所以设计稿大小要*2

影响因素:1 设备物理像素  2 缩放  3 dpr

设置理想视口

<meta name="viewport" content="width=device-width,initial-scale=1.0">

 

方法1 固定高度,宽度自适应:垂直方向用定值,水平方向百分比、定值、flex都行。

  原理:<meta name="viewport" content="width=device-width,initial-scale=1">

方法2 固定宽度,viewport缩放: viewport width使用一个宽度,浏览器自动完成缩放,单位使用px。

  原理:需要根据屏幕宽度动态生成viewport,生成的类似<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

方法3 rem做宽度,viewport缩放

  根据屏幕宽度设定rem值,需要适配的元素使用rem,不需要是配的元素使用px。

  原理:1 动态生成viewport ,设置为1/dpr   2 屏幕宽度设置rem大小,即给 html设置font-size   3 根据设备像素比 window.devicePixelRatio 给设置data-dpt

  <html  data-dpr="2" style="font-size:40px;> <meta name='viewport' content='initial-scale=0.5,...>

  这样使不同的设备的rem和px都显示的一样长。

 

posted @ 2017-08-25 00:23  筱qian  阅读(147)  评论(0编辑  收藏  举报