熟记名词就能装逼如风,却不能成为一名好的开发者,在这里与大家一起先复习一遍开发中涉及到的单位,不论是为了技术梦想还是为了人生目标,都应该好好了解一下。
即屏幕对角线之间的距离,单位为英寸(inch)。单位换算如下:
分辨率大致分为两种:
像素(pixel)是组成图像的最小显示单位,它是一个抽象的单位,而不是具体的长度,在Web开发中通常将像素分为两类:
以Phone 5为例,它的设备像素为640/1136px,设备像素比为2,因此CSS像素为320/568px。设计师通常根据固定的设备像素进行设计,前端工程师再根据不同设备的特性,将物理像素转换为相应的逻辑像素。
设备像素比缩写为DPR(Device Pixel Ratio)或者DPPX(Dots Per Pixel),一般用于表示一个CSS像素等于几个物理像素:DPR=物理像素/逻辑像素
。当dpr为2时,1个CSS像素由4个物理像素组成,可通过window.devicePixelRatio
获取当前设备的dpr。
像素密度也叫做屏幕密度,缩写为DPI(dots Per Inch)或PPI(Pixels Per Inch)。以iphone X举例,设备的参数如下:
为了计算像素密度,我们通常需要求出屏幕对角线的分辨率,再除以屏幕对角线尺寸。根据勾股定理(直角三角形的两条直角边的长度的平方和等于斜边长的平方),得以下表达式:
tricks:
像素=英寸 x dpi
,可以通过调整图像像素大小,获取所需要的实际尺寸大小。以寸照为例,通过搜索,1寸=2.5cm x 3.5cm=413 x 295
,聪明的你肯定不需要过多的说明,看以下换算公式:
viewport概念通常存在于移动端,因为pc端的视口大小与窗口相等,而在移动设备的浏览器中,一般视口的默认大小会比设备逻辑的独立像素要大,并可拖过手动缩放来浏览网页,这个窗口就称之为viewport,普通设备浏览器的默认viewport通常为980px或1024px,随之的副作用就是设备的横向滚动条。
手机浏览器默认会去适应那些不是为移动端设计的网站,因此会为viewport设置一个默认值,一般为980px,这样大部分电脑端页面都能正常显示了,只是比例看起来很小,因此布局视口通常是大于浏览器可视区域,不进行缩放的情况也会有额外的额外滚动条,这个宽度可以通过document.documentElement.clientWidth
来进行获取,它跟设备的大小没有关系。
用户默认看到的网站区域,即为视觉视口大小,放大会使视觉视口大小变小,因为整个屏幕显示的CSS像素更少了,而缩小会使其变大,缩放不会影响布局视口大小。
布局视口并不是一个理想宽度,对设备而言,设备宽度即是理想视口宽度,通常可见viewport的一个属性:width=device-width
,这一行代码告诉浏览器将视口大小设置为理想视口大小。
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport标签专为移动端的设备而设计,以上是一个最常用的标签,它可以设置以下几个特性:
视口单位与%很像,但一个依赖于视口大小,一个依赖于元素的父级,既然在此提出来了,那么视口单位有哪些作用呢?没错,主要是用于适配的。
在实际的项目中,通过将vw作为宽度,可以获取较适合的屏幕比例,高度不推荐使用,除非是设计师已经设计好了元素的比例,此时才应该使用vw单位作为宽度,在项目中通过任意一个预处理器的函数可将设计图上的像素计算为px,以下是我的stylus函数:
$mobile-screen = 640
px2vw(px, device = $mobile-screen)
(px / device * 100)vw
px2vw(320) // 输出为50vw
首选方案,即启动开发服务器的时候,将端口设置为0.0.0.0,然后连接同一网段的ip进行访问。若需要真机调试的话,若没有服务器的话,可以使用ngrok进行代理,有服务器推荐使用frp,当然,做微信相关的开发,请使用微信开发者工具。
常用浏览器的默认html的字体大小是16px,网上最流行将其设置为font-size: 10px
或者是font-size: 62.5%
,大家在使用rem前需要知道以下两点:
font-size: 1rem
,它的实际大小为10px。因此非常不建议设置为12px以下,这样会造成计算不精准;也不建议设置如100px的大小,若忘记给元素设置font-size,默认值会影响整个页面的美观;因此建议设置范围在12-20之间。
100vw是基于viewport的尺寸,会填满viewport,而100%占据全部可获得的空间。
需要注意的是,vw会忽略滚动条所占据的宽度,假如在有纵向滚动条的情况下,将元素宽度设置为100vw,那么横向就会出现一个很小的滚动条,在这种情况下应该使用100%。具体原因是因为当html和body的overflow:auto时滚动条不会从视口中减去,而overflow:scroll时视口就会减去滚动条占据的空间,也不会出现滚动条了。
当在dpr为2的高清设计图看到border为1px时,其实设计师需要的是1个物理像素,转化为CSS像素就是0.5px,那么如何解决呢?在此简单总结为以下方法:
一、通过JavaScript检测浏览器的dpr,从而给html添加一个类名,再到需要处理的样式的地方写一套权重更高的样式表。但是这样的解决方法并不兼容部分老设备,但我相信随着时间的推移,兼容性的问题也会大大减少吧。
二、动态设置viewport标签,假设机型为phone5时,可设置为如下viewport,这样页面中所有border:1px都将缩小为0.5:
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">
在实际使用时请参考某网站的JavaScript动态计算dpr、rem、viewport的方式。
ngrok,调试工具
frp,调试工具