移动web基础总结

小鱼儿 2023-06-24 15:21 5阅读 0赞

### 1、什么叫做物理像素 ###

物理像素又称为———设备像素 (设备固定的属性)  
逻辑像素就是设备独立像素  
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。  
公式表示就是：window.devicePixelRatio = 物理像素 / dips

1、一个物理像素是显示器（手机屏幕）上最小的物理显示单元，在OS的调度下，每一个设备像素都有自己的颜色值和亮度值。  
2、设备独立像素 （也叫目睹无关像素），也可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（css像素），然后相关系统转换为物理像素  
3、设备像素比（dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下公式得到： 设备像素比 = 物理像素/设备独立像素 ；

## 2、什么叫做逻辑像素 ##

CSS像素，viewport中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。

## 3、什么叫做设备像素比 ##

设备像素比(device pixel ratio 简称 dpr)

dpr = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

在javascript中，设备的 dpr 可以通过 window.devicePixelRatio 获得。在css中，可以通过 -webkit-device-pixel-ratio ， -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

### 4、什么叫做 ppi ###

像素密度（Pixels Per Inch 简称 PPI）

表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。我们经常说的视网膜屏幕（Retina）,之所以看起来清晰度高，是因为其 ppi 很高的 。而图像、色彩还原度高是其 dpr 比一般的设备高；  
以 iphone6s 为例：

设备宽高为 375×667 ，可以理解为设备独立像素(逻辑像素 或者 css 像素)。  
dpr = 2（也就是我们通常说的“二倍屏”），可以得出其物理像素应该是其逻辑像素的 2 倍，750 \* 1334。  
如下图（图是盗的）：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]  
由上图可以看出，同样的 css 代码：

{ 
        width:2px;
        height:2px;
    }

在不同的设备上所呈现的效果是不一样的，在普通一倍屏上，其表示 2 \* 2 个物理像素点，而在二倍屏上，其表示 4 \* 4 个物理像素点；

位图（bitmap）

亦称为点阵图像或栅格图像，是由称作像素（图片元素）的单个点组成的。即每一个图像像素都包含一些自身的显示显示信息（如：显示位置，颜色值，透明度等等），我们常用的 web 图片（如 png，jpg，gif，bmp）都是位图；与之对应的是矢量图（如 swf、svg 等等）矢量图可以无损缩放，而位图不行，对其进行放大时就会模糊，原因如下图（图是盗的）：  
![在这里插入图片描述][20191223203433719.png]  
对于二倍屏来说，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)；

所以一张宽度为 375px 的图片，同样都是 375×667的设备铺满屏幕， 在一倍屏上显示是正常的，而在二倍屏上显示就会变模糊；针对此问题，比较好的解决方案就是 用“二倍图片”（@2x），也就是使用宽度为750px的图片。这就解释了视觉稿宽度通常为 750px。

也许大家有个疑问：那一倍屏中显示二倍图片，会不会有问题呢？

其实问题不会太大，设备会根据图像的四个像素信息，算出其在一个像素点上应该如何显示，只是会使图片缺少一些锐度罢了。

设备的 dpr 不同，所导致也不仅只有图片的显示问题，还有 边框1px 问题等，具体在 下一篇 rem 实现移动端适配一些细节处理。

### 5、为什么需要二倍图 ###

因为不同的移动设备分辨率不一样，以iphone为例，我们假设你在pc上设置的是原始比例即一倍的显示，iphone6的分辨率要乘以2倍，而6+则要乘以3倍，才能在设备上显示清晰的图片。否则，你用一倍的图片适配所有机型，遇到分辨率大的设备，图片是模糊的  
1 rem = html font-size = 50px

在reset.css文件中  
![在这里插入图片描述][20191223203715897.png]  
假如一个二倍图的div高度是86px

那么对应的我们应该填43px

移动端一般用rem表示宽高

所以这里我们应该填写0.86rem

如果一个一倍图的高度是23px

那么我们应该填写0.46rem

同理3倍图

### 6、CSS3盒子模型的特点是什么 ###

css3增添了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式  
语法：box-sizing:content-box|border-box|inherit

参数说明：

content-box：默认值，让元素维持W3C标准盒模型，element width/height=border+padding+content width/height。  
border-box：让元素维持IE传统的盒模型（IE6以下版本盒IE6~7怪异模式），内容的宽度或高度=盒子的宽度或高度-边框-內距，元素的宽度或高度等于元素内容的宽度或高度。  
inherit：使元素继承父元素的盒模型模式。  
box-sizing属性主要用来控制元素的盒模型的解析模式，主要目的是控制元素的总宽度。

content-box和border-box示例效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css测试</title>
        <style>
         .content-box{ 
          width:208px;
          padding:32px;
          border:solid blue 16px;
          box-sizing: content-box;
          margin:20px;
         }
         .border-box{ 
          width:208px;
          padding: 32px;
          border:solid green 16px;
          box-sizing: border-box;
          margin:20px;
         }
        </style>
    </head>
    <body>
      <div class="content-box">
        测试测试测试测试测试测试测试测试测试测试测试测试
        测试测试测试测试测试测试测试测试测试测试测试测试
        测试测试测试测试测试测试测试测试测试测试测试测试
      </div>
      <div class="border-box">
        测试测试测试测试测试测试测试测试测试测试测试测试
        测试测试测试测试测试测试测试测试测试测试测试测试
        测试测试测试测试测试测试测试测试测试测试测试测试
      </div>
    </body>
    </html>

##### css3内容溢出属性 #####

Overflow-x主要是用来定义水平方向的内容溢出的剪切，overflow-y主要用来定义垂直方向内容的剪切。  
基本语法：

参数说明：

visible：默认值，不剪切容器中的任何内容，不添加滚动条，元素将被剪切为包含对象的窗口大小，且clip属性设置失效。
    auto：在需要时剪切内容并添加滚动条。
    hidden：内容溢出时，内容隐藏且不显示滚动条
    scroll：不管内容有没有溢出容器，都会显示滚动条
    no-display：当内容溢出容器时，不显示元素
    no-content：当内容溢出容器时不显示内容

##### css3自由缩放属性 #####

resize属性允许用户通过拖动的方式修改元素的尺寸以改变元素的大小。  
语法：

resize:none|both|horizontal|vertical|inherit

参数说明：

none：用户不能拖动元素修改尺寸大小
    both：用户可以拖动元素，同时修改元素的宽度和高度
    horizontal：用户可以拖动元素，仅可以修改元素的宽度
    vertical：用户可以拖动元素，仅可以修改元素的高度
    inherit：继承父元素的resize属性值

##### css3外轮廓属性 #####

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓属性一种动态样式，只有元素获取到焦点或者被激活时呈现。  
语法：

outline:outline-color||outline-style||outline-width||outline-offset||inherit

参数说明

outline-color：定义轮廓线的颜色
    outline-style：定义轮廓线的样式
    outline-width：定义轮廓线的宽度
    outline-offset：定义轮廓线的偏移位置的数值，为整数值时表示轮廓框向外偏离多少个像素；为负数值时表示轮廓框向内偏移多少个像素。
    inherit：元素继承父元素的outline效果
    outline制作的边框只能四边出现，不能单边出现，且outline制作的模拟边框不会影响盒模型的大小。

### 7、如果要单独为页面制作一个移动版本，有哪些布局方式可以选择 ###

流体布局

流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，通过设置了百分比，你将不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，你可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。

.box1{ 
    
    width: 38%;
    
    float: left;
    
    margin: 5%;
    
    }

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。

而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191223203334936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70
[20191223203433719.png]: https://img-blog.csdnimg.cn/20191223203433719.png
[20191223203715897.png]: https://img-blog.csdnimg.cn/20191223203715897.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019122320400912.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70