新闻中心

为什么要移动端适配?

一般情况下设计稿的设计师按照 375 的尺寸设计,然而,在现在移动终端(就是手机)快速更新的时代,每个品牌的手机都有着不同的物理分辨率,这样就会导致,每台设备的逻辑分辨率也不尽相同,此时 375 的设计稿,如果想要还原那基本是不可能了,因为如果一个左右布局,左边如果写死,右边自适应的话,每个设备的右边所展示的内容大小就不尽相同,这时移动端适配就显得尤其重要。

既然要了解前世今生,我们就从几个概念说起,先上一张图。

下面我们一个个解析。

1.1 屏幕尺寸

屏幕尺寸是以屏幕对角线的长度来计量,计量单位为英寸。

如图所示两个对角线的长度就是这个屏幕的尺寸:

1.2 像素

我们看到上图 320x480 叫分辨率,而这个所谓的分辨率说白了就是横向320个像素纵向480个像素组成 

1.2.1 什么叫像素呢?

像素(Pel, pixel, pictureelement),为组成一幅图像的全部亮度和色度的最小图像单元。电视的图像是由按一定间隔排列的亮度不同的像点构成的,形成像点的单位也就是像素,组成图像的最小单位就是像素。从计算机技术的角度来解释,像素是硬件和软件所能控制的最小单位。它指显示屏的画面上表示出来的最小单位,不是图画上的最小单位。一幅图像通常包含成千上万个像素,每个像素都有自己的颜色信息,它们紧密地组合在一起。由于人眼的错觉,这些组合在一起的像素被当成一幅完整的图像。当修改图像的某区域,实际上是在修改该区域内的像素。对这些像素修改的好与坏将决定最终图片的质量。单位面积内的像素越多,图像的效果就越好。彩色电视图像是由成千个像素点所组成的,而且每个像素都是由红绿蓝三种颜色并排组成的。(注意每个像素的大小是不固定的,他是根据设备的分辨率决定的,知识点,后面要考)

1.2.2 什么叫分辨率呢?

屏幕分辨率是指纵横向上的像素点数,单位是 px。屏幕分辨率确定计算机屏幕上显示多少信息的设置,以水平和垂直像素来衡量。就相同大小的屏幕而言,当屏幕分辨率低时(例如 640 x 480),在屏幕上显示的像素少,单个像素尺寸比较大。屏幕分辨率高时(例如 1600 x 1200),在屏幕上显示的像素多,单个像素尺寸比较小。

知道什么叫做分辨率后,有人就会奇怪,我记得苹果的苹果官网上的苹果 6 的分辨率为 750x1334 啊,但是设计稿上苹果 6 的分辨率为 375x667 啊,而且各个设备的分辨率都比实际分辨率小很多,这就牵扯到一些历史原因了

1.2.3 设备物理分辨率(设备像素)

相信我们所有前端开发者,都是见证了手机这个移动设备发展的过程。从蓝屏手机,到彩屏手机,到诺基亚研发出来触屏手机,再到智能手机一步步发展下来,我们的我们的手越来越清晰,越来越大,所以我们的屏幕发展也越来越迅速。

上图可以清楚的看到,不同分辨率所带来的的差距。

从最初的颗粒感相当大的屏幕,到 720p 再到 1080p,甚至于现在各家旗舰手机的 2k 屏幕,我们的物理分辨率在变得原来越大。这样就暴露出来一个问题,我们如果手机分辨率翻倍,我们的图像不就要被缩小一倍,我们难道要在每个设备上就出个设计稿,每个设备的分辨不尽相同啊,其实你担忧的问题,我们的乔帮主在很多年前就想到了。这就是我们的逻辑分辨率

1.2.4 逻辑分辨率(设备独立像素)

如下图所示,虽然设备物理分辨不同,但是他的这个逻辑分辨率却都差不多,这就要感谢乔帮主了。

乔布斯在 iPhone4 的发布会上首次提出了 Retina Display(视网膜屏幕)的概念,在 iPhone4 使用的视网膜屏幕中,把 2x2 个像素当 1 个像素使用,这样让屏幕看起来更精致,但是元素的大小却不会改变。从此以后高分辨率的设备,多了一个逻辑像素。这些设备逻辑像素的差别虽然不会跨度很大,但是仍然有点差别,于是便诞生了移动端页面需要适配这个问题,既然逻辑像素由物理像素得来,那他们就会有一个像素比值。

1.2.5 设备像素比

设备像素比 device pixel ratio 简称 dpr,即物理像素和设备独立像素的比值。为什么要知道设备像素比呢?因为这个像素比会产生一个非常经典的问题,1 像素边框的问题。

1、1px 边框问题

当我们 css 里写的 1px 的时候,由于它是逻辑像素,导致我们的逻辑像素根据这个设备像素比(dpr)去映射到设备上就为 2px,或者 3px,由于每个设备的屏幕尺寸不一样,就导致每个物理像素渲染出来的大小也不同(记得上面的知识点吗,设备的像素大小是不固定的),这样如果在尺寸比较大的设备上,1px 渲染出来的样子相当的粗矿,这就是经典的一像素边框问题。

2、如何解决?

核心思路,就是在 web 中,浏览器为我们提供了 window.devicePixelRatio 来帮助我们获取 dpr。在 css 中,可以使用媒体查询 min-device-pixel-ratio,区分 dpr:我们根据这个像素比,来算出他对应应该有的大小,但是暴露个非常大的兼容问题。

其中 Chrome 把 0.5px 四舍五入变成了 1px,而 firefox/safari 能够画出半个像素的边,并且 Chrome 会把小于 0.5px 的当成 0,而 Firefox 会把不小于 0.55px 当成 1px,Safari 是把不小于 0.75px 当成 1px,进一步在手机上观察 iOS 的 Chrome 会画出 0.5px 的边,而安卓(5.0)原生浏览器是不行的。所以直接设置 0.5px 不同浏览器的差异比较大,并且我们看到不同系统的不同浏览器对小数点的 px 有不同的处理。所以如果我们把单位设置成小数的 px 包括宽高等,其实不太可靠,因为不同浏览器表现不一样。

至于其他解决一像素边框问题网上有一堆答案,在这里我推荐一种非常好用,并且没有副作用的解决方案。

transform: scale(0.5) 方案

div { height:1px; background:#000; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden;}

css 根据设备像素比媒体查询后的解决方案

/* 2倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }}/* 3倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }}


如此,完美的解决一像素看着粗的问题。

扩展补充

CSS 最新的规范中正在计划通过标准的属性实现一像素边框,通过给border-width属性添加hairline关键字属性来实现,具体如下链接[1]。之所以叫hairline,是因为一像素边框就跟头发丝一样。

练习使用方案时,也要多多关注最新发展哟。


详情请登录  http://www.xkzjsj.com

所有课程尽在新科展计算机学校http://www.xkzjsj.com

联系人倪老师:15543625258微信同步

QQ2395263754

详情请登录  http://www.xkzjsj.com

长春市朝阳区同志街与隆礼胡同交汇火炬大厦9楼新科展计算机学校(桂林路附近)


吉林省新科展高级IT网络培训中心是吉林省最大的计算机培训学校
吉林省新科展高级IT网络培训中心学校常年招生,咨询学习请提前电话联系,登记预约学习时间
新科展承诺:100%推荐就业,规定时间内免费重学。

合作伙伴

计算机培训 培训学校