1.7-移动端基础

移动端基础

物理像素

整个屏幕是由一个个的点组成，屏幕上的点是有限的，目前技术做不到无穷个点组成屏幕，这些有限的点就叫做像素，或称它为物理像素

分辨率

分辨率说的是横向上的物理像素个数和纵向上的物理像素个数

标清手机屏上是1css像素=1个物理像素，随着 Retina(视网膜屏)等技术的兴起，能够将更多的物理像素点压缩至一块屏幕中，从而达到跟高的分辨率，提升屏幕显示的细腻度

如果使用物理像素表示1px，结果就是在高清手机屏幕上现实的要比在标清手机屏幕上现实的东西要小

• 不能使用物理像素表示元素尺寸

逻辑像素

逻辑像素（px）是css像素或者称为设备独立像素

举例

• 

• 总结

  • 在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子最中使用 22 个物理象时表示
    在高清屏下，1个逻辑像素，用2个物理像素表示，所以盒子最终使用44个物理像素表示
    整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍
  • 如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）
  • css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与

设备像素比

设备像素比简称dpr，dpr=设备像素/css像素，上面指的是同一方向上，也就是谈到设备像素比时，只考虑1个方向

举例

• 

• 总结

  • 左边的 dpr=1，右边的dpr=2，所以,dpr=2，就是1个css像素用 2x2个设备像素(物理像素)来绘制

缩放

物理像素是不能改变大小的

我们是对逻辑像素进行缩放，即1css 像素等于多少个物理像素，换言之，就是1个css像素需要用多少个物理像素表示

放大

• 举例

  • 

  • 总结

    • 原来1个css像素=1个物理像素
      放大2倍，就是让1个css像素的宽和高都放大2倍，所以我们看到在右边屏幕上，放大2倍后，1个css像素就占用了4个像素点
      所以，放大2倍后，1个css像素=2x2个物理像素

缩小

• 举例

  • 

  • 总结

    • 原来1个css像素=1个物理像素
      缩小到1/2后，1个css像素的宽和高都缩小到原来的1/2，所以我们看到右边屏幕上，缩小后，4个css像素才等于1个css像素
      所以，缩小1/2后，2x2个css像素=1个物理像素

PPI

表示每英寸的物理像素点，ppi，也称作 dpi

ppi的计算方法

• 

二倍图

• 核心思路

  • 

举例

• 

• 真机上的效果图

  • 

视口

概念

• 视口就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

布局视口

• 是为了在手机端浏览pc端的网页而提出的

• 举例

  • 

  • pc端的网页在手机端显示只会显示一部分，需要左右拖动才会能看的完整

• 布局视口>视觉视口，所以会在视觉视口中出现横向滚动条

视觉视口

• 是把pc端网页等比例缩放显示在手机端，而不出现横向滚动条，手机屏幕的区域我们称为视觉视口，但是会变小

理想视口

• 对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏览和阅读宽度而设定

• 需要设置 meta 标签进行设置

  • meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

• 总结

  • 我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

meta标签(理想窗口的设定)

宽度设定

• 

• 问题

  • iphone6的屏幕宽度为375，盒子的宽度设定为300，但是从视觉效果上看，盒子的宽度还不到屏幕宽度的1/2，为什么会这样？

  • 当前的布局视口的宽度

    • 

      • 当前是以 980 作为视口宽度的，那么当980缩小之整个屏幕后，盒子的宽度也会相应的缩

• 如何解决

  • 设置布局视口与iphone6的屏幕宽度一致，也是375，则页面内容就无需缩小

    • 即：

  • 但是并不是所有的手机屏幕宽度都是375，所以 width 的值不能固定，而是由设备实际的宽度决定

    • 需要改成：

缩放

• 页面在首次加载时，可以设置缩放比

• 设置缩放比为1，上面代码的作用与右面同样

  • width=375

• 但是考虑到兼容性，仍然建议两个属性都要写

用户缩放

• 上面是开发者设置的页面初始缩放比例，手机端浏览器默认是允许用户通过触摸动作进行页面缩放的

• 可以通过下面的属性控制

  • user-scalable=no

• 完整写法

• 也可以使用右面的两个属性替代上面的属性

  • aximum-scale=1,minimum=1

• 完整写法

最终版

• 最标准的viewport设置

  • 视口宽度和设备保持一致
    视口的默认缩放比例1.0
    不允许用户自行缩放
    最大允许的缩放比例1.0
    最小允许的缩放比例1.0

• 完整版的 viewport 代码

box-sizing

• CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度

• content-box 是默认值

  • 如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中

• border-box

  • 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高