移动端适配的基础知识

先上楼主的图

首先，咱们需要了解以下几个专有名词和单位

这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。

首先，先来看一下物理像素。

以iphone6为例，可知道：

分辨率：1334pt x 750pt
指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。

屏幕尺寸：4.7in
注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。

屏幕像素密度：326ppi
指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时，屏幕像素密度=分辨率/屏幕尺寸

接着，我们来看一下其他的单位。

设备独立像素：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是，物理像素开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。

设备像素比：缩写简称dpr，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。设备像素比 = 设备像素 / css像素（垂直方向或水平方向）。可以通过JS来获取：window.devicePixelRatio

链接：demo项目

原文链接：https://segmentfault.com/a/1190000011586301

移动端适配的基础知识相关推荐

移动端Web开发基础知识
文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图 SVG矢量图移动端Web开发移动Web开发的两种主流方案,一种是单独制作移动端页面,另一种是制作响应式页 ...
移动端开发入门--基础知识
1.一些概念 dp, pt device-independent pixels 设备无关像素, 基于设备内的坐标系统测量的物理单位, 代表了一个可以由程序使用的虚拟像素, 然后由底层系统转换成逻辑像素 ...
移动web开发入门—基础知识、自适应布局、调试
之前没做过移动端web开发,最近接手的一个小项目是做微信公众号,需要考虑手机适配.UI给出的设计稿是一般是基于iphone手机做的(15年之后是基于ipone6),我们的UI是基于iphone6来做的 ...
关于移动端适配，你必须要知道的
关于移动端适配,你必须要知道的关于移动端适配,你必须要知道的分享一款前端实用的面试题小程序建议收藏,微信搜索 MST题宝库移动端适配,是我们在开发中经常会遇到的,这里面可能会遇 ...
前端CSS移动端适配
导读移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... 上面这些问题可能我们在开发中 ...
java中浏览器电脑的分辨率_关于移动端适配，你必须要知道的
原标题:关于移动端适配,你必须要知道的来自公众号:code秘密花园导读移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方 ...
产品经理必备知识之网页设计系列（三）-移动端适配无障碍设计及测试
前言第一部分参见产品经理必备知识之网页设计系列(一)-创建出色用户体验 https://blog.csdn.net/wenyusuran/article/details/108199875 第二部 ...
IM开发基础知识补课(三)：快速理解服务端数据库读写分离原理及实践建议
1.前言 IM应用从服务端数据的角度来看,它是一种很特殊的应用场景,抛开基础数据.增值业务和附属功能不谈,单从IM聊天工具的立身之本--聊天数据来说,理论上是不需要在服务端存储的(或者说只需要短暂存储 ...
关于移动端适配的几个方法，快速构建响应式网站必备知识
随着移动端的发展,手机端的页面应用越来越广泛,所以我们现在更多的是做移动端的页面. 但是我们同样要维持pc端,因此难免会遇到许多麻烦. 而且现在做移动端适配的方法也有好多种,针对不同的网站我们需要合理 ...
FTP基础知识_FTP服务端应用开发
网络编程_进阶_FTP服务器开发文件传输是日常生活,工作中需求量较高的一项功能,FTP可以使用户在两个已联网的计算机之间传输文件,它是互联网环境下传递文件最主要的方法. 要了解FTP的传输过程,学习 ...

移动端适配的基础知识

移动端适配的基础知识相关推荐

最新文章

热门文章