首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    揭秘移动端px,dpi,dpr

    前言 移动端开发的时候,我们拿到的 UI设计稿 通常都是 640px 或者是 750px ,明明我们的 设备视口宽度 是设计稿的 一半 ,这是为什么呢?...比如iPhone5使用的是Retina视网膜屏幕,用2x2的Device Pixel代表1x1的CSS Pixel,所以设备像素数为640x1136px,而CSS逻辑像素数为320x568px 所以,1...获取屏幕的DPR 为什么iPhone6为标准的设计稿是750px,而不是375px ?...那么一开始就用 750px ,切下来的图是不是可以直接适配Retina屏(这也解释了为什么视觉稿的画布大小要×2),当然了 375px 也行,不过此时我们处理375px设计稿的时候,认为这个单位是逻辑像素...,但是有些情况却不能按逻辑像素去处理, 比如图片 ,这时候得需要设计提供·二倍图 ,当然我们在375px设计稿量 细边框 的高度的时候,注意不要惯性觉得是1px长度,也有可能是 0.5px ,因为是 375px

    2.1K10

    rem响应式布局-自动将px转换为rem--px2rem插件的使用

    ),在util文件夹下新建rem.js文件,内容如下: // rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem...' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function() { setRem() } 第三步 在项目main.js中引入此文件.../util/rem' 第四步 在项目根目录新建vue.config.js文件(如已有请忽略),并在其中添加如下代码 // 引入等比适配插件 const px2rem = require('postcss-px2rem...') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize,需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件...此方案本人实测会被vscode格式化插件格式化为小写,诸君也可以试试,如果没装格式化插件的话此方案是最方便的 在这行css代码后面加上注释/*no*/。

    89910

    视频讲解:PX-Backup安装

    视频内容 首先,打开PX-Central, 点击Install and Run,点击 New Spec,在下面的PX-Backup,点击Next,输入组织名称,集群名称-即Portworx集群的名称...Admin的密码,点击Next, 设置一些环境信息,例如是否是本地部署环境,是否运行在OpenShift上,以及是否需要设置中央端点,这里我们设置成“自动生成”,我们在本地环境不作其他特殊的设置,接下来,指定PX-Central...运行的命名空间,在这个命名空间里,会部署你的备份,输入KubeConfigPath,并配置密码,设置你是否需要在PX-Central对集群进行监控,以及是否是Air-Gapped,如果KubeConfig...它就会安装和部署备份,密码这些,连接到集群,这样就可以使用PX-Backup,不同环境下,这个步骤可能会花一点时间,完成后,就会出现一些授权的访问信息,从而通过PX-Central的界面可以访问,复制端点的信息到浏览器...,就会打开PX-Central,使用之前配置的管理员用户名和密码,点击登录,进入之后可以点击“增加集群”,来备份Kubernetes环境。

    1.1K20

    关于一个16px的span为什么占用21px的空间

    前言 不知道大家有没有注意到,我们在浏览器中,设置了一个16px的span标签,但实际却占用了21px的高度,比如下图: 1.png 浏览器默认样式 上述这个情况是由浏览器默认样式造成的,浏览器对于行级元素有默认的...DOCTYPE html> JS Bin html,body...2.png 3.png 我们可以看到span的高度还是21px,但是div的高度确实16px了。...是因为给行级元素设置line-height是没有效果的,所以我们给span加上display:inline-block才能使line-height生效。 4.png 果然,成为内联元素生效了。...image.png 大家应该清楚是如何产生的吧,浏览器默认的line-height大概是1.32左右,加上默认的对齐方式都是基线对齐: vertical-align: baseline。

    1.9K30
    领券