移动web开发之像素和DPR

【移动web开发之像素和DPR】的更多相关文章

移动web开发之像素和DPR

× 目录 [1]定义 [2]分类 [3]缩放[4]DPR 前面的话像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了.本文将介绍关于像素的相关知识定义像素,又称画素,是图像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“图像元素”之意,有时亦被称为pel(picture elemen…

移动web开发之像素和DPR详解

前话: 像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了.本文将介绍关于像素的相关知识什么是像素: 像素,又称画素,是图像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“图像元素”之意,有时亦被称为pel(picture element) 像素是网页布局的基础.一个像素就是计算机能够显…

移动web开发填坑（一）

上周开始接触移动web开发,默默的掉进了很多坑里面.本文主要总结本周遇到的坑以及如何填坑. 1.px与rem换算. 设计稿的宽度一般是640px,而iphone是320px,所以测量设计稿的结果首先要除2,这时的单位还是px,下一步要转换成rem,怎么转换呢?得看根节点怎么设置的. 首先,任意浏览器的默认字体高都是16px,所有未经调整的浏览器都符合: 1em=16px:那么10px=0.625em:于是为了便于计算,可以为body设置font-size=62.5%:到这里,换算关系为10px=…

移动端web开发的一些知识点

整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用css设置为0.5. 平时用的比较多的也是使用transform了: div{ height:1px; background:#; -webkit-transform: scale…

【前端】移动端Web开发学习笔记【2】 & flex布局

上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> Flex弹性盒模型来源:慕课网源HTML文件(备份下载):web_flex…

移动web开发适配方案之Rem

移动端为什么要做适配移动端相对PC端来说大部分浏览器内核都是基于Webkit的,所以大部分都支持CSS3的最新语法.但是由于手机的屏幕尺寸和分辨率都不太一样(尤其是安卓),所以不得不对不同分辨率的手机做适配来达到近似的展示效果. 一般来说,UI只会给我们提供一份设计图,目前比较多的是参考手机淘宝的方案给一份750px宽的设计稿,而我们前端要做的就是在不同分辨率的手机上以同样的效果展示这份设计稿. 在讲适配方案之前,有几个基本的移动端开始相关的知识点得了解一下 rem单位: 说到rem这个单位就…

前端笔记之微信小程序（一）初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR

一.小程序概述 2017 年 1 月 9 日小程序正式上线,腾讯开放了个人开发者开发小程序,小程序从此就开始火爆,这一年,小程序狂揽 4 亿用户.1.7 亿的日常活跃,上线 58 万个.这是一个巨大的机会,对于企业宣传,拉新用户存在变革性的影响. 小程序的本质是:轻应用,就是不用安装就能使用的手机APP. “跳一跳”养成了大家下拉寻找常用小程序的习惯. 小程序对开发者而言也是非常友好的. 微信就是一个“虚拟机”,小程序使用JavaScript编程,小程序将JavaScript翻译为机器能够识别的…