zoukankan      html  css  js  c++  java
  • 移动端适配

    视觉稿规范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都显示的一样长。

  • 相关阅读:
    asp.net 奇淫技巧
    生成缩略图不清晰
    NPOI相关
    Dapper
    Newtonsoft.Json高级用法(转载)
    swfobject2.2
    如何把SQLServer数据库从高版本降级到低版本? (转载)
    Smallpdf 轻松玩转PDF。我们爱它。
    Simple Data
    在HTML中优雅的生成PDF
  • 原文地址:https://www.cnblogs.com/yxiaoqian/p/7425969.html
Copyright © 2011-2022 走看看