移动web开发
1.像素
1.1 什么叫做物理像素
比如,手机像素是1792×828分辨率,就是手机屏幕横向828个点,手机屏幕纵向上有1792个点,同等大小屏幕下,点越多,图像显示越精信。
上面所说的屏幕上一个个点就是物理像素(phy sical pixel),物理像素也叫设备像素(dp:device pixel)。
其实,每个像素就是一个点,每个点由红绿蓝三种色组成,只需要控制每个点每种颜色的明暗,就可以显示不同的颜色。
1.2 什么叫做逻辑像素
逻辑像素,也叫CSS像素(logical pixel)
也成为设备独立像素(dip:divice independent pixel)
在网页开发中,使用的就是CSS像素
如:
.box{
width:1000px;
height:500px;
}
CSS像素与物理像素的关系
- 在标清屏下,1个css像素使用1个物理像素展示
- 在高清屏下,1个css像素使用4个物理像素表示
**注意:**高清屏下,4个点相当于标清屏下1个点的大小,所以说在高清屏下1个css像素使用4个物理像素表示。
点越多,展示的越精细,想想灯带。。。。
浏览器会根据当前设备屏幕,自动换算出1个CSS像素使用多少个物理像素表示
1.3 什么叫做设备像素比
设备像素比(dpr:device pixel ratio)
dpr=设备像素/CSS 像素(缩放比是1的情况下)
所以上面两种屏幕下的 dpr 分别为
dpr=2 表示的1个css 像素使用 2X2 个设备像素绘制
注意:计算时指的是1个方向上,横向或者纵向
所以 dpr>1 的我们都可以认为是高清屏
1.4 什么叫做PPI
PPI的复杂之处在于如果他所属的上下文环境不同,意义也会完全不一样。 当我们在谈论显示设备的PPI时,它代指的屏幕的像素密度;当我们在谈论和图片相关时,我们谈论的是打印时的分辨率或者打印机的打印精度。这里我们主要描述的前一种情况,关于后两种,我们在文章的最后会谈到,有兴趣的同学可以阅读。
PPI全称为Pixel Per Inch,译为每英寸像素取值,更确切的说法应该是像素密度,也就是衡量单位物理面积内拥有像素值的情况。
如上图所示,在1英寸单位内面积内拥有的像素越多,密度越大,PPI值就越高。但像素密度的实际意义是什么?它表达的是什么?或高或低对设备显示来说有什么影响?
一般来说,我们当然希望PPI值越高越好,因为更高的PPI意味着在同一实际尺寸的物理屏幕上能容纳更多的像素,能够展现更多的画面细节,也就意味着更平滑的画面。
2. 二倍图
- 对于一张50px * 50px(css像素)的图片,在手机 Retina 屏中打开,按照上面介绍的物理像素比会放大倍数,这样会造成图片模糊
- 在标准的viewport 设置中,使用倍图来提高图片质量,解决在高清屏设备中的模糊问题
- 通常使用二倍图,因为在 iphone6\7\8 的影响,但是现在还存在3倍图、4倍图的情况,这个看实际开发公司需求
- 背景图片注意缩放问题
具体解决方案
准备一张100 * 100 的图片,但是通过css 将其设置成50 * 50,在高清屏上,会将其放大2被,变成 100 * 100,因为图片背身就是100 * 100,所以不会失真
需要注意的是,一定将其设置成50 * 50,否则会将其放大成200 * 200,仍然会失真
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
在标清屏上,1个css像素使用1个物理像素表示
在高清屏上,1个css像素使用2个物理像素表示
也就是说,图片在高清屏上会被放大2倍,所以50 * 50 的图片会被放大到100 * 100
所以,我们的解决思路是:
如果我们想在手机上显示50*50的图片,根据手机的dpr,如果是2,则使用一张100*100的图片,然后
通过css将其设置为 50*50,那么到了高清屏下,会自动的将其放大2倍,成为100*100,而我们图片
背身就是100*100,所以不会失真
*/
img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<img src="./images/2.jpg" alt="">
<img src="./images/2@2.jpg" alt="">
<img src="./images/4@4.jpg" alt="">
</body>
</html>
背景图片也采用同样的方式,准备的应该是北京尺寸2倍的图片,然后通过 background-size 将其设计成1倍
如何快速起初2倍图、3倍图,别忘了我们PS中的切图神器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
width: 375px;
height: 200px;
border: 1px solid black;
background-image: url(./images/3.jpg);
background-size: 375px;
}
.box2 {
width: 375px;
height: 200px;
border: 1px solid black;
background-image: url(./images/3@3.jpg);
background-size: 375px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
总结 准备的图片是开发尺寸的2倍或者其他倍数
3. CSS3盒子模型的特点
设置盒子的尺寸以内容为准还是边框为准
传统模式宽度计算:盒子宽度= CSS 中设置的 border+width+padding
CSS3 盒子模型:盒子宽度=CSS 中设置的width 里面包含了 border 和 padding
也即是说 CSS3 盒子模型中,padding 和 border 的设置不会撑大盒子了
注意:移动端可以全部使用CSS3盒子模型,PC端如果需要兼容,使用传统模式,不考虑兼容,使用CSS3 盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
}
img{
box-sizing: border-box;;
width: 100px;
height: 100px;
background-color: #fff;
width: 50%;
float: left;
padding: 20px;
}
</style>
</head>
<body>
<img src="./images/2@2.jpg" alt="">
<img src="./images/2@2.jpg" alt="">
</body>
</body>
</html>
4. 单独制作移动端页面的布局方式
- 流式布局(百分比布局)
- flex弹性布局(强烈推荐)
- less+rem+媒体查询布局
- 混合布局
响应式页面兼容移动端 - 媒体查询
- bootstrap
5. 布局视口、视觉视口、理想视口
- layout
viewport(布局视口):在PC端上,布局视口等于浏览器窗口的宽度。而在移动端上,由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里,此时的布局视口会远大于移动设备的屏幕,就会出现滚动条。js获取布局视口:document.documentElement.clientWidth
| document.body.clientWidth; - visual
viewport(视觉视口):用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站,我们看到的网站区域将变大,此时视觉视口也变大了,同理,用户放大网站,我们能看到的网站区域将缩小,此时视觉视口也变小了。不管用户如何缩放,都不会影响到布局视口的宽度。js获取视觉视口:window.innerWidth; - ideal
viewport(理想视口):布局视口的一个理想尺寸,只有当布局视口的尺寸等于设备屏幕的尺寸时,才是理想视口。js获取理想视口:window.screen.width;
1、在桌面浏览器上,浏览器窗口与视口的宽度一致,而视口(CSS标准文档中称为“初始包含块”)是CSS百分比宽度推算的根源,因此,浏览器窗口是约束CSS布局的视口;
2、在手机上,有两个视口,布局视口会限制CSS布局;视觉视口决定用户看到的网站内容;
3、移动端浏览器还有个理想视口,它是对特定设备上的特定浏览器的布局视口的一个理想尺寸;
4、可以把布局视口尺寸定义为理想视口。这也是响应式设计的基础。
作者:小莫莫呀
链接:https://www.jianshu.com/p/7c5fdf90c0ef
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。