移动web开发

移动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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。