大家好,又见面了,我是你们的朋友全栈君。
有很长一段时间没有更新博客了,近一段时间开始重新梳理知识点和写博客了,新的博客地址:欢迎访问。
对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1.首先,选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334)。
###3个视口###
###像素### 一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多,同一时间你可以看到的就越多。 设备物理像素 设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。 CSS像素:px(设备独立像素) 逻辑像素,浏览器使用的抽象单位(之所以叫抽象单位,是因为其可以根据不同的设备和不同的关系来变大变小,所以称为抽象单位)为Web开发者创造的,在CSS和JavaScript中使用的一个抽象的层。px是相对长度单位,相对的是设备物理像素(device pixel) 注意:在旧的屏幕上,当缩放程度为100%时,一个CSS像素等于一个设备像素。但当在高密度屏幕上,例如苹果的视网膜屏幕,一个CSS像素跨越了多个设备像素。如果用户缩小到足够的程度,一个CSS像素会变得明显比一个设备像素小。 举个例子: 当给一个元素设置width:200px时,到底会发生什么事情? 这个width为200px的元素跨越了200个CSS像素。而200个CSS像素相当于多少个设备物理像素取决于屏幕的特性(是否是高密度)和用户进行的缩放。 用户放大得越大,一个CSS像素覆盖的设备物理像素就越多。因此,这个元素不一定会跨越200个设备物理像素。例如:在苹果的视网膜屏幕上,视网膜屏幕的像素密度是普通屏幕的两倍,那么这个元素就跨越了400个设备物理像素。如果用户放大,它将跨越更多的设备物理像素。 再比如以iphone6为例: 设备宽高为375×667,可以理解为设备独立像素(或CSS像素)。 其dpr为2,根据上面的计算公式,其设备物理像素就应该×2,为750×1334。 ###位图像素### 一个位图像素是栅格图像(如:png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如:显示位置,颜色值,透明度等)。 理论上:1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。 在普通屏幕下是没有问题的,但是在retina屏幕下就会出现位图像素点不够,从而导致图片模糊的情况。对于dpr=2的retina屏幕而言,1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊。 所以,对于图片高清问题,比较好的方案就是两倍图片(@2x)。 如:200×300(css pixel)img标签,就需要提供400×600的图片。 如此一来,位图像素点个数就是原来的4倍,在retina屏幕下,位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例,图片自然就清晰了(这也解释了之前留下的一个问题,为啥视觉稿的画布大小要×2?)。 ###屏幕尺寸### 屏幕尺寸:指屏幕的对角线的长度,单位是英寸。
###设备像素比(device pixel ratio)### 设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到: 设备像素比 = 设备物理像素 / 设备独立像素 计算公式: 1px = (dpr)^2dp; 获得设备像素比后,便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时,使用1个设备像素显示1个CSS像素。当这个比率为2:1时,使用4个设备像素显示1个CSS像素,当这个比率为3:1时,使用9(33)个设备像素显示1个CSS像素。 在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的dpr。而在CSS中,可以通过**-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio**进行媒体查询,对不同dpr的设备,做一些样式适配 为什么iPhone5是320px*586px? 就是因为其dpr = 2 dpr = 2表示一个CSS像素等于4个物理像素 所以:640dp1136dp = 320px568px
iphone5对外宣称的640*1136是物理像素,而我们实际开发中用的px是逻辑像素。
**DPI:**打印机每英寸可以喷的墨汁点 PPI(pixel per inch):屏幕每英寸的像素数量,即单位英寸内的像素密度 PPI越高,像素数越高,图像越清晰。 ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi。 但是可视度越低(小),系统默认设置缩放比越大 Retina屏(高清屏):dpr都是大于等于2
<meta>
标签有很多种,而这里要着重说的是viewport的meta标签,其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大。
手机浏览器是把页面放在一个虚拟的”视口”(viewport)中,视口可大于或小于手机屏幕的可视区域,一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的其他部分。
设置页面窗口自动调整到设备宽度,并禁止用户及缩放页面
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1, user-scalable=no" />
上述属性基本含义:
<meta name="viewport" content="width=device-width" />
这样一来layout viewport将成为ideal viewport(完美视口),因为layout viewport宽度与设备视觉视口宽度一致了。 除此之外,我们还可以通过设置initial-scale=1来实现ideal viewport。
<meta name="viewport" content="initial-scale=1" />
忽略将页面中的数字识别为电话号码:
<meta name="format-detection" content="telephone=no" />
忽略Android平台中对邮箱地址的识别:
<meta name="format-detection" content="email=no" />
如果在页面中我们使用rem结合js动态计算font-size值来实现多屏幕适配,这种方式可以无限适配最大和最小的终端屏幕。但是当屏幕超过一定的尺寸以后还继续显示h5页面的话会给用户带来不好的体验。因此,我们需要给页面设置最大的宽度和最小宽度。 比如:
{
max-width:640px;
min-width:320px;
}
line-height 的一个主要作用是:使得文本在父级元素中垂直居中。 属性值:
lineheight属性很有用,但是也存在一些问题:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>lineheight</title>
<style type="text/css">
.box{
font-size: 100px;
border: 1px solid red;
/*line-height: 100%;*/
}
</style>
</head>
<body>
<div class="box">我是超大字体</div>
</body>
</html>
从上图,我们发现字体和父元素上下之间有点小间距。这里我们可以通过给父元素设置line-height:100%来解决这个问题。 上下的小间距是由于line-height 与 font-size 的计算值之差造成的。当设置为line-height 的值为100%的时候,line-height的值就等于 font-size的尺寸,此时的空白间距为0。
##小知识点## 拨打电话代码:
<a href="tel:1234567890">打电话给:1234567890</a>
发短信代码:
<a href="sms:1234567890">发短信给:1234567890</a>
调用手机系统自带的邮件功能代码:
<p><a href="mailto:dlut123@126.com">发电子邮件</a></p>
##rem自适应原理## rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局 ###调整html元素大小的值### 有css与js两种方式 css方式:
html {
font-size: calc(100vw / 3.75);
}
除以3.75这里是以iphone6为设计稿为标准的,100vw表示设备宽度。为了使得html的字体大小为100px,这样我们在换算的时候,1px 就是0.01rem,就很方便我们计算。 js方式: 我们只需要监听resize事件即可
document.documentElement.style.fontSize = document.documentElement.clientWidth/3.75 + 'px';
$(window).on('resize', function() {
document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
})
为了避免在一些手机浏览器上不支持calc,vm这些CSS3新属性,在实际应用中最好还是使用js方式。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/151987.html原文链接:https://javaforall.cn