概念

移动端Web适配概念和相关知识介绍

视口viewport、物理像素、分辨率、屏幕尺寸等相关概念理解,设计稿、向上适配和向下适配、vw、适配常用css单位rem、CSS3媒介查询等基本介绍

2018-06-16侠课岛    初级拔高       

前端/前端必修/移动端Web适配探索实践 19     0     4225

移动端适配概念和相关知识介绍

viewport视口

通常来说,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。不同设备上的浏览器的默认viewport的宽度也不一样
设置理想视口:把默认的layout viewport的宽度设为移动设备的屏幕宽度,得到理想视口(不能出现横向滚动条)

CSS像素

CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为与设备无关的像素(device-independent pixel),简称DIPs。CSS像素顾名思义就是我们写CSS时所用的像素(px)

物理像素(physical pixel)

物理像素又被称为设备像素,它是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏,指的是设备以多少物理像素来显示一个CSS像素,在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素对应的却是2个物理像素。

设备独立像素(Device Independent Pixels)

设备独立像素(dips)是操作系统定义的一种像素单位,应用程序将设备独立像素告诉操作系统,操作系统再将设备独立像素转化为设备像素,从而控制屏幕上真正的物理像素点。

css像素与设备独立像素的关系:
缩放比例就是css像素边长/设备独立像素边长。
在缩放比例为100%的情况下,一个css像素大小等于一个设备独立像素。

设备像素比dpr(device pixel ratio)

设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:

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

在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。

rem(一个CSS单位)

rem定义是根元素的font-size, 以rem为单位,其数值与px的关系,需相对于根元素html的font-size计算,比如,设置根元素font-size=16px, 则表示1rem=16px。

vw/vh:CSS单位

vw(view-width), vh(view-height) 这两个单位是CSS新增的单位,表示视区宽度/高度,视区总宽度为100vw, 总高度为100vh。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

19

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?