移动端的一些基础知识

Cheng_Gang 发布于2019-08-20 16:22 / 1611人阅读

摘要：设备像素物理像素可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素比，然后由相关系统转换为物理像素。在中，用来获取当前设备的在中可以通过，和进行媒体查询，对不同的设备，做一些样式适配这里只针对内核的浏览器和。

设备像素(物理像素)：可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素比，然后由相关系统转换为物理像素。

屏幕密度：是指一个设备表面上存在的像素数量
CSS像素：是一个抽象的单位，主要使用在浏览器上，用来精确度量Web页面上的内容，css像素称为与设备无关的像素
设备像素比（device pixel ratio）:简称为dpr,定义了物理像素和设备独立像素的对应关系

设备像素比 = 物理像素 / 设备独立像素

在不同的屏幕上，css像素所呈现的物理尺寸是一致的，在普通屏幕下1个css像素对应1个物理像素，而在Retina屏幕下，1个css像素对应的却是4个物理像素。

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

iphone6设备宽度和高度为375 667，可以理解为设备的独立像素。他的dpr为2，所以他的物理像素为750pt1334pt

云服务器 GPU云服务器关于适配移动端的移动端的html js 移动端的表单好一些vps

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82896.html

移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
toy.js 构思中的移动端开发框架(一)

摘要：最近看了不少关于前端方面的书籍加上之前在的基础上利用裸奔开发了一个移动端的项目在没有借助任何框架的基础下写了近行的代码这是项目初期完全没有想到的问题在把后端的数据处理搬迁到前端以后问题就开始变得极具复杂性端的前端发展已有数年目前也有不少成熟最近看了不少关于前端mvc方面的书籍,加上之前在zepto的基础上利用iscroll裸奔开发了一个移动端的webapp项目,在没有借助任何mvc框...

paney129 2019-08-19 14:51 评论0 收藏0
还在为无缝滚动而烦恼？是时候彻底get到这个知识点了

摘要：最近一直在忙公司炒股大赛的页面，终于在昨天把他给上线了。刚开始学习的时候，真心觉得无缝滚动是一个神奇的功能。原理假如需要无缝滚动的个元素是一个中的个。我们将控制在容器中滚动。这样无缝滚动就已经实现了。最近一直在忙公司炒股大赛的页面，终于在昨天把他给上线了。一个看似简单的页面，做起来才知道其中的艰辛，暗藏深坑。由于直接使用jquery来写页面逻辑，因此要比想象中复杂很多。无论是从布局，...

stormjun 2019-08-19 18:20 评论0 收藏0