深度讲解VIEWPORT和PX是什么
深度讲解VIEWPORT和PX是什么
刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320、640 还是 720?
按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?
—— 这源于对viewport和px的不了解。
已经重构了好多移动页面,但是对为什么要按照640的大小来设计页面,不清楚答案。
给元素赋予固定的像素值,但是奇怪的是在不同的手机里看起来都差不多大小,不需要另外去适配,真是太爽了。为什么?不知道耶。
——这源于对viewport和px的不了解。
先来罗列下学习移动页面重构的过程中可能看到过迷糊过放弃过的一些单位:
px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……
接下来分类给大家介绍下:
① 什么是绝对长度单位?什么是相对长度单位?
② 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?
③ 什么是ppi、dpi、dp、dip、sp、px?他们之间的关系是什么?
④ 什么是mdpi、hdpi、xdpi、xxdpi?如何计算和区分?
1、什么是绝对长度单位?什么是相对长度单位?
- 绝对长度单位:
in(inch英寸)、cm(厘米)、mm(毫米)、pt(磅)、pc(pica)。
in、cm、mm和实际中的常用单位完全相同。pt是标准印刷上常用的单位,72pt的长度为1英寸。pc也是印刷上用的单位,1pc的长度为12磅。绝对长度单位,虽然理解起来很容易,但是在网页的设计中很少用到。所以我们就忽略它们吧。 - 相对长度单位:
是网页设计中使用最多的长度单位,包括px、em、rem等。
2、什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?
- 屏幕尺寸:
指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
屏幕分辨率:
指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素横向像素来表示一个手机的分辨率,如1960*1080。(这里的1像素值得是物理设备的1个像素点)屏幕像素密度:
屏幕上每英寸可以显示的像素点的数量,单位是ppi,即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。
最明显的就是iPhone 3GS和iPhone 4的区别。屏幕尺寸一样,屏幕分辨率相差一倍,屏幕像素密度也相差一倍。
计算像素密度的公式:
勾股定理算出对角线的分辨率:√(1920²+1080²)≈2203px
对角线分辨率除以屏幕尺寸:2203/5≈440dpi。
3、什么是ppi、dpi、dp、dip、sp、px?
ppi:
pixels per inch,屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度。dpi:
dots per inch,最初用于衡量打印物上每英寸的点数密度,就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时,就称之为ppi。ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi。dp、dip:
dp和dip都是Density Independent Pixels的缩写,密度独立像素,可以想象成是一个物理尺寸,使同样的设置在不同手机上显示的效果看起来是一样的。
在Android中,规定以160dpi为基准,1dp=1px。如果密度是320dpi,则1dp=2px,以此类推。
Android和IOS都会通过转换系数让控件适应屏幕的尺寸。
一个按钮给了44*44dp的大小,在160dpi密度的时候,按钮就是44*44px大小;在320dpi密度的时候,按钮就是88*88px的大小。不需要我们去书写多套尺寸。
sp:
scale independent pixels,用法与dp类似,是专门用来定义文字大小的,受用户android设备字体设置的影响。px:
就是通常所说的像素,使网页设计中使用最多的长度单位。将显示器分成非常细小的方格,每个方格就是一个像素。(网页重构中使用的px和屏幕分辨率的px不一定是一样的大小。)
4、什么是mdpi、hdpi、xdpi、xxdpi?
Google官方指定按照下列标准区分不同设备的dpi:
苹果的区分则更为简单:非高清屏、高清屏、超高清屏。
从数值上看,苹果和安卓有这样的对应关系:
单位介绍完了。总结下如何使我们更好的理解自己的工作。
我们重构移动页面的时候使用px其实跟安卓开发中使用dp是一样的
有个背后的系数会帮我们把数值适配到这款手机的大小。而这个系数就是上图的1x、2x、3x……这个系数怎么来?是依靠分辨率和屏幕尺寸计算到的屏幕像素密度,再看屏幕像素密度属于哪个系数等级。
以上是单位的介绍,下面再来认识个重要的知识点。
Viewpoint
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中
窗口可大于或小于手机的可视区域,一般手机默认 viewport 大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的其他部分。
部分机型默认 viewport 大小:
我们可能会这样设置viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
每个设置对应的是:
参数 | 意义 |
---|---|
width | 设置 Layout viewport 的宽度, 为一个正整数, 或字符串"device-width" |
height | 设置 Layout viewport 的高度, 这个属性对我们并不重要, 很少使用 |
initial-scale | 设置页面的初始缩放值, 为一个数字, 可以带小数 |
minimum-scale | 允许用户的最小缩放值, 为一个数字, 可以带小数 |
maximum-scale | 允许用户的最大缩放值, 为一个数字, 可以带小数 |
user-scalable | 是否允许用户进行缩放, 值为"no"或"yes", no代表不允许, yes代表允许 |
这个页面背景图是作为背景给了 background-size:100%;
的,所以整好铺满整个屏幕,大小看起来很适合。而上面的元素使用固定的px值来赋予大小的,例如左上角的人头给了 width:100px;height100%;
。为什么两者分别是这样子显示的?
网页重构时使用的单位px,就是通常所说的像素,是网页设计中使用最多的长度单位。将显示器分成非常细小的方格,每个方格就是一个像素(这和我们理解的屏幕分辨率的1920px 1080px的px是不同的)。不同设置下,方格的大小不一样。
例如 iPhone4S 如果不设置 viewport ,他就会默认是 980px,就像把屏幕分成980份(不是屏幕分辨率的640px哦!)。如果设置一个元素为100px*100px,看起来就是屏幕的100/980,可能如下图所示:
例如 iPhone4S 如果设置 viewport width=device-width
,他就会是320px,就像把屏幕分成320份(不是屏幕分辨率的640px哦!)。如果设置一个元素为100px*100px,看起来就是屏幕的100/320,可能如下图所示:
上图未设置 viewport,弹出来的都是设备的默认宽度,基本是980px,除了最后一台三星老爷机是800px。
上图设置了viewport,width=device-width
,弹出来的是设置好的宽度,375px、360px、320px。为什么是这个大小?这就要用到上面讲的知识点了。
iPhone6的屏幕分辨率是1334*750px,ppi是326,所以系数是2x。那device-width就等于750/2=375px。
红米1s的屏幕分辨率是1280*720px,ppi是312,所以系数是2x。那device-width就等于720/2=360px。
页面里的红色块给的是200*200px,在几个设备看起来好像差不多大的样子。
三星note4的屏幕分辨率是2560*1440px,ppi是515,所以系数是4x。那 device-width
就等于1440/4=360px,和小米的 divice-width
一样大小。但是看起来左边的红色块明显大于右边,因为左边的设备大啊,虽然两者都是分成360份,但是明显左边的1份比右边的1份大。
以上解释了为什么给元素赋予固定的像素值,给字体16px的大小,在大部分手机里居然能看起来差不多大小,也明白了我们并不需要写其他尺寸来适配不同的屏幕大小。不知道我这样拐弯的解释大家能明白不?
对于应该按照多大的尺寸来设计移动网页,这个看设计师喜欢,640是以前的主流,因为好多设计师用的是 iPhone4S、5S。现在在慢慢转向750,因为iPhone升级成6了。不管哪种尺寸的设计稿,重构都可以用一套方法制作好页面,如果是背景平铺(background-size:100%)、上面的元素px设置大小的话,没问题,能顺利适配其他手机的。如果是固定整体大小重构,再利用 js 判断屏幕大小进行页面缩放,也没问题,能顺利适配其他手机的。重要的前提是要设置好正确的 viewport。
深度讲解VIEWPORT和PX是什么相关推荐
- envi 文件 生成mat_JVM 内存分析工具 MAT 的深度讲解与实践——入门篇
1. MAT 工具简介 MAT(全名:Memory Analyzer Tool),是一款快速便捷且功能强大丰富的 JVM 堆内存离线分析工具.其通过展现 JVM 异常时所记录的运行时堆转储快照(Hea ...
- 机器学习(三)聚类深度讲解
在理解大数据方面,聚类是一种很常用的基本方法.近日,数据科学家兼程序员 Peter Gleeson 在 freeCodeCamp 发布了一篇深度讲解文章,对一些聚类算法进行了基础介绍,并通过简单而详细 ...
- messagehub讲解_艾舜杰SAP Data Hub 数据服务总线技术深度讲解
原标题:艾舜杰SAP Data Hub 数据服务总线技术深度讲解 艾舜杰SAP Data Hub 是一个多方面的数据编排解决方案, 旨在解决在不断增长的分布式数据环境中的挑战.它的关键功能包括:数据管 ...
- GoLang之Map深度讲解
文章目录 GoLang之Map深度讲解 1.Map查找 2.哈希函数 3.Map插入.修改 4.扩容分析 GoLang之Map深度讲解 1.Map查找 //以下常量在runtime/map.go里 c ...
- MySQL数据库深度讲解
文章目录 mySQL深度讲解 Oracle 和 MySQL 比较 第一章 数据库设计 彻底搞定MySQL乱码问题 常见的字符集 数据库存储引擎 mySQL命令帮助 第三章 mySQL 语言结构 SQL ...
- 深夜爆肝JS好文!2021字节跳动春招面试题深度讲解
剑指offer -- 2021字节跳动春招面试题深度讲解(JS篇) 1. 深拷贝与浅拷贝 2. 原型与原型链 3. this 指向问题 4. new 关键字做了什么? 5. 原生JS如何实现事件委托? ...
- 位深度讲解,opencv8位单通道和32位单通道解析
在记录数字图像的颜色时,计算机实际是用每个像素需要的位深度来表示的,黑白二色的图像是数字图像中最简单的一种,它只有黑.白两种颜色,也就是说它的每个像素只有1位颜色,位深度是1,用2的一次幂来表示:考虑 ...
- html中像素是什么,[html5]html5中的viewport和px是什么(腾讯)
刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320.640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?-- 这源于对viewport和px的不 ...
- MySql进阶索引篇01——深度讲解索引的数据结构:B+树
深度讲解索引的数据结构:B+树 1.索引介绍 1.1 为什么使用索引 1.2 索引的优缺点 2.从零开始设计索引 2.1没有索引时怎么查询数据 2.2 基于页的目录项的简单索引 2.3 InnoDB索 ...
最新文章
- IDNO简单生成方法
- Delphi编码及注释规范
- library的英语怎么读音_【英语角】———学习方法分享
- gvim for php,转 : Gvim建立IDE编程环境 (Windows篇)
- Android实现分享代码,Android 分享功能的实现代码
- 微信红包封面小程序源码-后台独立版-带测评积分功能源码
- Windows下编译FFmpeg-2.6.1详解
- 谭浩强C语言(第三版)习题6.11
- app测试比相比web测试需要注意的点
- phpQuery占用过多内存的解决方法
- Technorati 2008 年度博客状况报告(第一部分)
- ubuntu16.04,zed7020,sdsoc,xfOpenCV,arm-linux,OpenCV3.4.1
- [20190227]Windows系统评估工具winsat.txt
- 跟小博老师一起学习数据库 ——索引
- max等聚合函数和group by搭配使用的注意事项
- 快排及其优化(C语言)
- 计算机用户组命令,组策略命令大全
- Spring中事务提交成功后处理的异步调用方法
- 知乎上一些JAVA精选问答
- Pinterest 3.0 for iOS设计过程——升级iOS7设计思路详解