• 移动相关的css


    1.首先认识第一个apple-mobile-web-app-capable 删除默认的苹果工具栏和菜单栏。
      <meta name="apple-mobile-web-app-capable" content="yes">

    2.apple-mobile-web-app-status-bar-style 是控制状态栏显示样式
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">  

        

     3.告诉设备不识别电话和邮箱

    <meta content="telephone=no,email=no" name="format-detection">

      4.设置手机竖版显示

      <!-- uc强制竖屏 -->
        <meta name="screen-orientation" content="portrait">
        <!-- QQ强制竖屏 -->
        <meta name="x5-orientation" content="portrait">

     5.清除浏览器缓存  

    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, post-check=0, pre-check=0">
    <meta http-equiv="Expires" content="0">
    6.
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">


    视窗 viewport

    简单的理解,viewport是严格等于浏览器的窗口。在桌面浏览器中,viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。

    移动端的viewport太窄,为了能更好为CSS布局服务,所以提供了两个viewport:虚拟的viewportvisualviewport和布局的viewportlayoutviewport。

    物理像素(physical pixel)

    物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

    设备独立像素(density-independent pixel)

    设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。

    CSS像素

    CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为与设备无关的像素(device-independent pixel),简称DIPs。

    屏幕密度

    屏幕密度是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算(PPI)。

    设备像素比(device pixel ratio)

    设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:

    设备像素比(window.devicePixelRatio) = 物理像素 / 设备独立像素

    在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的dpr。而在CSS中,可以通过-webkit-device-pixel-ratio-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

    dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

    缩合上述的几个概念,用一张图来解释:

    Flexible实现手淘H5页面的终端适配

    众所周知,iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素;而其dpr为2,根据上面公式,我们可以很轻松得知其物理像素为750pt * 1334pt

    目前Flexible会将视觉稿分成100份(主要为了以后能更好的兼容vhvw),而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出:

    1a   = 7.5px
    1rem = 75px 

    那么稿子就分成了10a,也就是整个宽度为10rem<html>对应的font-size75px

    这样一来,对于视觉稿上的元素尺寸换算,只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片,其尺寸是176px * 176px,176/75 转换成为2.346667rem * 2.346667rem

  • 相关阅读:
    Java数据结构学习之Vector和Stack
    System.arraycopy方法的使用
    git提交的时候,报错yarn run v1.21.1 ,SyntaxError: Cannot use import statement outside a module 解决
    关于使用antdproTable,报错 ResizeObserver loop limit exceeded
    【数据库数据恢复】Sql Server数据库数据恢复案例
    【存储数据恢复】服务器存储上的raid5阵列崩溃的数据恢复案例
    【raid数据恢复】光纤存储raid阵列数据恢复案例
    【服务器raid数据恢复】光纤存储raid数据恢复案例
    【虚拟机数据恢复】Linux系统下误删除KVM虚拟机的数据恢复案例
    【服务器数据恢复】服务器raid5磁盘阵列分区丢失的数据恢复案例
  • 原文地址:https://www.cnblogs.com/myzy/p/5849358.html
Copyright © 2020-2023  润新知